React Dependency Conflict Version 18.0 with Material-UI

I've tried all suggestion here but did not work. Issue with Material UI Icons npm installation : unable to resolve dependency tree nor this one below: create-react-app dependency version issues with React 18 What can be done to solve this issue, please? below is my package.lock.json.

     "name": "cashflowbr",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cashflowbr",
      "version": "0.1.0",
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@fontsource/roboto": "^4.5.5",
        "@mui/icons-material": "^5.6.2",
        "@mui/material": "^5.6.2",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }

I appears that you are attempting to import MUI version 4 components while installing MUI version 5.

Your imports should be from @mui/material (version 5) and not from @material-ui/core (version 4).

Option 1

Change your imports to use the installed library (@mui/material), ex:

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

Option 2

Change your package.json to install MUIv4.

Remove:

"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
...
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2",

... and add:

"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.3",

Finally, run npm install. Delete your node_modules folder and then npm install if you have any issues after that.