reactjs - Create React App の Chakra UI が Hook エラーをスローする

Question

React と Chakra に取り掛かります。「create-react-app」で作成した小さな React アプリがあり、少し進んだ後、Chakra UI を追加してスタイリングを追加したいと思いました。公式ドキュメントに従ってセットアップしましたが、index.js ファイルに「ChakraProvider」コンポーネントをセットアップすると、フック エラーが発生します。これらのコンポーネントを削除すると、アプリは正常に動作します。しかし、私が知る限り、コンポーネントは適切に配置されています。

これは私が得ているエラーです

これは私のindex.jsファイルです

そして、これは私のpackage.Jsonです:

  "dependencies": {
    "@chakra-ui/react": "^1.6.5",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "framer-motion": "^4.1.17"
  }
}```