Материал Tailwind — TypeError: невозможно прочитать свойства null (чтение «useContext»)

Я создаю клиентский проект, используя React с Typescript и используя Material Tailwind UI - MT. Но при использовании компонентов MT я получаю ошибку useContext, о которой, похоже, сообщается в файле theme.js MT. Я все перепробовал, но все равно не могу исправить, кто-нибудь знает эту ошибку?

Сообщение об ошибке

Сообщение об ошибке 1

Warning: 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.

Сообщение об ошибке 2

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (react.development.js:1618:1)
    at useTheme (theme.js:1:1)
    at App (App.tsx:7:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)

index.tsx

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Provider} from "react-redux";
import {store} from "./grvd/storage";
import {RouterProvider} from "react-router-dom";
import {router} from "./grvd/routers";
import {ThemeProvider} from "@material-tailwind/react";

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <ThemeProvider>
            <Provider store = {store}>
                <Suspense fallback = {<div>Loading...</div>}>
                    <RouterProvider router = {router}/>
                </Suspense>
            </Provider>
        </ThemeProvider>
    </React.StrictMode>
);

пакет.json

{
  "name": "client-ver-2",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.11.5",
    "@material-tailwind/react": "^2.1.9",
    "@mui/material": "^5.15.16",
    "@reduxjs/toolkit": "^2.2.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.96",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.4",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "tailwind-merge": "^2.3.0",
    "tailwind-variants": "^0.2.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
  }
}

хвостовой ветер.config.ts

import graviadTheme from "./graviad-theme.js";
import withMT from "@material-tailwind/react/utils/withMT";

module.exports = withMT({
    content: ["./src/**/*.{html,js, ts,tsx}"],
    theme: {
        extend: {
            colors: graviadTheme.colors,
            fontFamily: graviadTheme.fontFamily,
            fontSize: graviadTheme.fontSize,
            boxShadow: graviadTheme.boxShadow,
            borderRadius: graviadTheme.borderRadius,
        },
    },
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
    ],
});

App.tsx

import React from 'react';
import './App.css';
import {Outlet} from "react-router-dom";
import {Typography} from "@material-tailwind/react";

function App() {
    return (
        <div className = "App">
            <Typography variant = {'h1'}>Graviad</Typography>
            <Outlet/>
        </div>
    );
}

export default App;

Я очень старался попробовать все, например, обновиться до последней версии, понизить версию, но это не сработало. Надеюсь на помощь от всех <3