For using MUI in next make sure :
Read This Article Integration With Next
CacheProvider is not only for caching , make sure you set cache provider , of course the next version of that
Is better to manage theme in a component , define theme and provide in a client component then wrap other components into it in layout
Make sure install and config the required dependencies for Next.js :
npm install @mui/material-nextjs @emotion/cache
You should consider, according to this article Support the Next.js MUI is not supporting server components yet , and may you have some problem with using MUI in a Next.js app