Using Material UI (MUI) component in NextJS – Invalid Hook Call

Following the usage guide on MUI’s site, I have a simple NextJS app where index.js is:

import Button from '@mui/material/Button'

const Home = () =>
{
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  )
}

export default Home

And _app.js is:

import '../styles/globals.css'

function MyApp({ Component, pageProps }) 
{
  return <Component {...pageProps} />
}

export default MyApp

I haven’t modified _app.js here or in my other NextJS projects.

Running the project results in the following error:

Unhandled Runtime Error Error: Invalid hook call. Hooks can only be
called inside of the body of a function component. This could happen
for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug
   and fix this problem

I think #2 is the issue here. However, I’m new to ReactJS so I’m not sure exactly what is going wrong.

Prior to this, I’ve worked on other projects to learn in which I used the useState and useEffect hooks without issue in this same Home component.

How can I integrate MUI components? MUI mentions a useButton hook here but I can’t find how to actually implement it without errors. Do you need to use a similar hook for every MUI component?