Invalid hook call

Вроде всегда рендерил данных способом, сейчас вылезает ошибка. Пожалуйста, помогите разобраться в чём проблема.

Вот мой код:

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Ошибка:

Uncaught 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.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useContext (react.development.js:1484:1)
    at useTheme (useTheme.js:4:1)
    at useStyles (makeStyles.js:222:1)
    at WithStyles (withStyles.js:55:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
useTheme @ useTheme.js:4
useStyles @ makeStyles.js:222
WithStyles @ withStyles.js:55
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1476 Uncaught 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.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useContext (react.development.js:1484:1)
    at useTheme (useTheme.js:4:1)
    at useStyles (makeStyles.js:222:1)
    at WithStyles (withStyles.js:55:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
useTheme @ useTheme.js:4
useStyles @ makeStyles.js:222
WithStyles @ withStyles.js:55
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <WithStyles(ForwardRef(AppBar))> component:

    at WithStyles (http://localhost:3000/static/js/bundle.js:42645:31)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1476 Uncaught 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.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useContext (react.development.js:1484:1)
    at useTheme (useTheme.js:4:1)
    at useStyles (makeStyles.js:222:1)
    at WithStyles (withStyles.js:55:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
useTheme @ useTheme.js:4
useStyles @ makeStyles.js:222
WithStyles @ withStyles.js:55
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Другие файлы:

Файл 1 import React from 'react'; import { Typography, AppBar } from '@material-ui/core';

import VideoPlayer from './components/VideoPlayer';
import Notifications from './components/Notifications';
import Options from './components/Options';


const App = () => {
    
    return (
        <div>
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">
                    Video Chat
                </Typography>
            </AppBar>
            <VideoPlayer />
            <Options>
                <Notifications />
            </Options>
        </div>
    )
}

export default App

Файл 2

import React from 'react';

const VideoPlayer = () => {
    return (
        <div>
            VideoPlayer
        </div>
    )
}

export default VideoPlayer

Файл 3

import React from 'react';

const Options = ( { children } ) => {
    return (
        <div>
            Options
            {children}
        </div>
    )
}

export default Options

Файл 4

import React from 'react';

const Notifications = () => {
    return (
        <div>
        Notifications
            
        </div>
    )
}

export default Notifications