chakra UIの使用方法がわからない！

実現したいこと

chakra UIを使えるようにしたいです
基本的な質問になります。

前提

Reactをインストール済み（インストールした初期の段階でほとんど変えていません）
chakra UIをインストール済み（node_modules / @chakra-uiというところに入っています）

発生している問題・エラーメッセージ

publicフォルダのindex.htmlにchakra UIのコンポーネントを表示したいです。
公式サイトに記載してある、

js
1import { ChakraProvider } from '@chakra-ui/react';

を入れると画面が真っ白になります

該当のソースコード

public/index.html

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <meta name="theme-color" content="#000000" />
8    <meta
9      name="description"
10      content="Web site created using create-react-app"
11    />
12    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14    <title>React App</title>
15  </head>
16  <body>
17    <noscript>You need to enable JavaScript to run this app.</noscript>
18    <div id="root"></div>
19  </body>
20</html>
21

src/index.js

js
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import reportWebVitals from './reportWebVitals';
6
7ReactDOM.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>,
11  document.getElementById('root')
12);
13
14reportWebVitals();
15

src/App.js

js
1import logo from './logo.svg';
2import './App.css';
3
4import * as React from 'react';
5import ReactDOM from 'react-dom';
6// ↓ここを追加しました
7import { ChakraProvider } from '@chakra-ui/react';
8
9
10function App() {
11  return (
12    <div className="App">
13      <header className="App-header">
14        <img src={logo} className="App-logo" alt="logo" />
15        <p>
16          Edit <code>src/App.js</code> and save to reload.?
17        </p>
18　　　// ↓ここを追加しました
19        <ChakraProvider>
20           <TheRestOfYourApplication />
21        </ChakraProvider>
22　　　// ↑ここまで
23        <a
24          className="App-link"
25          href="https://reactjs.org"
26          target="_blank"
27          rel="noopener noreferrer"
28        >
29          Learn React
30        </a>
31      </header>
32    </div>
33  );
34}
35
36export default App;
37

試したこと

index.jsに

js
1import { ChakraProvider } from '@chakra-ui/react';

を入れてみたが変わらずです。
App.jsに書いてある

js
1 import { ChakraProvider } from '@chakra-ui/react';

を

js
1import * as React from '@chakra-ui/react';

に変更しました。が、真っ白になりました。

App.jsを、chakra UIの公式にあったソースコード

js
1import * as React from 'react'
2
3// 1. import `ChakraProvider` component
4import { ChakraProvider } from '@chakra-ui/react'
5
6function App() {
7  // 2. Wrap ChakraProvider at the root of your app
8  return (
9    <ChakraProvider>
10      <TheRestOfYourApplication />
11    </ChakraProvider>
12  )
13}