React is giving error: export 'useId' (imported as 'React') was not found in 'react'

Question

I've created a new react app using webpack. It is showing me this error I've written minimum code as of now. The code giving error is:

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

export default function Navigation() {
  return (
    <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
            <Toolbar variant="dense">
                <Typography variant="h6" color="inherit" component="div">
                Photos
                </Typography>
            </Toolbar>
        </AppBar>
    </Box>
  );
}

Answer 1

useId was added in React 18, so another reason this issue can arise is if you're on an earlier React version.

Also, DON'T POST SCREENSHOTS OF CODE / ERRORS! Use backticks (`) to format them.