Пользовательский интерфейс материалов не может использовать реквизит

Я пытаюсь использовать флажок из пользовательского интерфейса материала.

Но по какой-то причине я не могу использовать обычный реквизит, такой как defaultChecked или size = "small". Когда я это делаю, я получаю сообщение об ошибке TS2769: No overload matches this call

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
    Property 'component' is missing in type '{ defaultChecked: true; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element | null', gave the following error.
    Type '{ defaultChecked: true; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | "action" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
      Property 'defaultChecked' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | "action" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
    10 |     return (
    11 |         <div>
  > 12 |             <CheckBox defaultChecked/>
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 |         </div>
    14 |     );
    15 | }

Это сводит меня с ума. Я могу использовать его, например, для элемента Box из Material UI. И я могу использовать, например, style = {{display: "flex", width: "100px", height: "100px", borderRadius: "50%" }} в Checkbox, и это сработает.

Например, у меня было довольно много проблем с Material UI этот пост, который я сделал вчера, и иногда он просто начинает работать, не чувствуя, что я что-то сделал. Я понятия не имею, почему Box начал работать.

Если это чем-то поможет. Это сбой кода. Тестовый маршрут - единственная важная часть. Но я добавлю все приложение на случай, если там будет что-то странное. И единственная часть, которая не работает, это тестовый маршрут.

import * as React from "react";
import {CheckBox} from "@mui/icons-material";


export default function Test() {

    return (
        <div>
            <CheckBox defaultChecked/>
        </div>
    );
}

import * as React from "react";
import {
  ChakraProvider,
  Box,
  VStack,
  Grid,
  theme,
 
} from "@chakra-ui/react";


import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LogIn from "./components/LogIn";
import Home from "./components/Home";
import SignUp from "./components/SignUp";
import Strengths from "./components/statsPages/Strength";
import Stamina from "./components/statsPages/Stamina";
import Techniques from "./components/statsPages/Technique";
import Progress from "./components/Progress";
import Information from "./components/Information";
import RecordClimb from "./components/RecordClimb";
import History from "./components/History";
import Test from "./components/Test";

declare global {
  var topGrade: String;
  var currentGrade: String;
}
export const App = () => (
  <ChakraProvider theme = {theme}>
    <Box
      textAlign = "center"
      fontSize = "xl"
      backgroundColor = {"blackAlpha.800"}
      backgroundSize = {"cover"}
    >
      <Grid minH = "100vh" p = {3} padding = {0}>
        <VStack spacing = {8} minH = "100vh" fontFamily = {"serif"}>
          <Router>
            <Routes>
              <Route path = "/" element = {<LogIn />} />
              <Route path = "/home" element = {<Home />} />
              <Route path = "/test" element = {<Test />} />
              <Route path = "/history" element = {<History />} />
              <Route path = "/signUp" element = {<SignUp />} />
              <Route path = "/strength" element = {<Strengths />} />
              <Route path = "/endurance" element = {<Stamina />} />
              <Route path = "/technique" element = {<Techniques />} />
              <Route path = "/progress" element = {<Progress />} />
              <Route path = "/recordNewClimb" element = {<RecordClimb />} />
              <Route path = "/information" element = {<Information />} />
            </Routes>
          </Router>
        </VStack>
      </Grid>
    </Box>
  </ChakraProvider>
);

Это мой пакет.json

{
  "name": "your-climb",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.4.9",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.11.16",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^28.1.8",
    "@types/node": "^12.20.55",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router": "^5.1.20",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^3.11.0",
    "react-scripts": "5.0.1",
    "react-router-dom": "^6.8.0",
    "typescript": "^4.9.4",
    "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"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}