Adding ChakraProvider to index.js displays blank screen

Here is my index.js . I am using Chakra UI for the upcoming project as well as I have installed the library. In chakra UI documentation it is given as:

2. Provider Setup# After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx or index.tsx Put in the following code:

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

Here is my index.js . It renders blank page :( Please help me with this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ChakraProvider } from '@chakra-ui/react';


ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();