React Material UI Button component not working

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.

After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.

The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.

Here is the simple Button: App.js

import {Button} from '@material-ui/core';

export default function App() {
  return (
    <div className="App">
        <Button>Click Me</Button>
    </div>
  );
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Index.html

<div id='root'></div>

And here is the package.json file (dependencies only shown here to reduce code length):

{
  "name": "mui-play",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }