My project is created with react typescript and I have installed craco in my project. when I am using some components like Tabs and Accordion from @material/tailwind below error occures:

Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')

my package.json is in below:

{
  "name": "panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-regular-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@material-tailwind/react": "^2.1.9",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@tanstack/react-query": "^5.45.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@turf/turf": "^7.0.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.100",
    "@types/react": "18.2.42",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "chart.js": "^4.4.3",
    "mapbox-gl": "~1.13.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-map-gl": "~7.0.20",
    "react-router-dom": "^6.23.1",
    "react-scripts": "5.0.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "sass": "^1.77.6",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "generate-scss-types": "typed-scss-modules src"
  },
  "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": {
    "@craco/craco": "^7.1.0",
    "@craco/types": "^7.1.0",
    "@epegzz/sass-vars-loader": "^6.1.0",
    "autoprefixer": "^10.4.19",
    "craco-sass-resources-loader": "^1.1.0",
    "css-modules-typescript-loader": "^4.0.1",
    "tailwindcss": "^3.4.4",
    "typed-scss-modules": "^8.0.1",
    "typescript-plugin-css-modules": "^5.1.0"
  }
}

and here is my craco.config.js:

const path = require("path");
const { loaderByName, addAfterLoaders } = require("@craco/craco");
const sassResourcesLoader = require("craco-sass-resources-loader");

module.export = {
  plugins: [
    {
      plugin: sassResourcesLoader, // import vars & mixins in src/styles/utils/*.scss in all .scss files
      options: {
        resources: path.resolve(__dirname, "src/styles/utils/*.scss"),
      },
    },
  ],
  css: {
    loaderOptions: () => ({ url: false }),
  },
  postcss: {
    plugins: [
      require("tailwindcss"),
      require("autoprefixer"),
    ],
  },
  webpack: {
    configure: (webpackConfig) => {
      addAfterLoaders(webpackConfig, loaderByName("sass-loader"), {
        loader: "@epegzz/sass-vars-loader",
      });
    },
  },
};

what should I do to fix it?