Error while using the mui icons in my react app

Question

Issue with MUI Icons in React App I'm encountering an error while trying to use MUI icons in my React app. The error occurs specifically after adding the SearchIcon component from MUI icons. Please help me resolve this. The error is encountered only after using the component in Header.js. Here are the relevant code snippets:

App.js:

import './App.css';
import Header from './Header';

function App() {
  return (
    <div className="app">
      <Header />
      {/* Home */}
    </div>
  );
}

export default App;

Header.js:

import React from 'react'
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';

function Header() {
return (
<div className='header'/>
<img alt="Amazon Logo" src="https://pngimg.com/uploads/amazon/amazon_PNG11.png" />
<div className='header__search'/>
<input className='header__searchInput' type='text' />
<SearchIcon className='header__searchIcon' />
</div>

);
}

export default Header;

package.json:

{
  "name": "amazon-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^10.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Error on localhost:3000:

Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
// ... (error details)

...

Warning on console:

WARNING in [eslint]
src\\Header.js
Line 8:9:  img elements must have an alt prop, either with meaningful text, o
// ... (warning details)

Answer 1

@mui/icons-material is a another library. Different of @mui/material. You must ever read the documentations, here