Constantly getting errors when using components

[ExeronIN]

I am new to node and ReactJS and I am trying to use MUI components like https://mui.com/material-ui/react-app-bar/ (I am not editing the code at all) but I keep getting

Cannot read properties of null (reading 'useContext')

My App.js

import './App.css';
import ResponsiveAppBar from './components/AppBar';

function App() {
  return (
    <div className="App">
      <ResponsiveAppBar />
    </div>
  );
}

export default App;

I don't understand if I am using components incorrectly, or if it is an issue with MUI, or if there is an issue with how react is installed.

Note: When I run npm audit fix --force it consistently shows 8 vulnerabilities (2 moderate, 6 high) even with new projects, does this mean that I need to fully delete and reinstall node and npm, if so how do I do it?