Chakra UI not working even after correct installation

I have followed the docs on Chakra UI installation in React.js. The component I'm working on works in a separate project but the moment I add it to the current project, it does not the styles. Instead displays plain html

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ChakraProvider, theme } from "@chakra-ui/react";
import Test from "./pages/Test";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme} />
        <Test />
    <ChakraProvider />
  </React.StrictMode>
);

Test.js

import React, { ReactNode } from 'react';
import {
    IconButton,
    Avatar,
    Box,
    CloseButton,
    Flex,
    HStack,
    VStack,
    Icon,
    useColorModeValue,
    Link,
    Drawer,
    DrawerContent,
    Text,
    useDisclosure,
    BoxProps,
    FlexProps,
    Menu,
    MenuButton,
    MenuDivider,
    MenuItem,
    MenuList,
} from '@chakra-ui/react';
import {
    FiHome,
    FiTrendingUp,
    FiCompass,
    FiStar,
    FiSettings,
    FiMenu,
    FiBell,
    FiChevronDown,
} from 'react-icons/fi';
import { IconType } from 'react-icons';
import { ReactText } from 'react';
import Rideshare from './Rideshare'
....
rest of my  code

package.json

.....

"dependencies": {
    "@chakra-ui/react": "^2.3.7",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@react-google-maps/api": "^2.13.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.19.2",
    "bootstrap": "^5.1.3",
    "dayjs": "^1.11.6",
    "framer-motion": "^6.5.1",
    "http-proxy-middleware": "^2.0.6",
    "jwt-decode": "^3.1.2",
    "query-string": "^6.13.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "reactstrap": "^9.1.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "remixicon": "^2.5.0",
    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.4"
  },
.....

I have tried reinstalling Chakra-UI using the command

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

but this solution hasn't worked. My package.json shows that Chakra-UI is installed.

I have gone and tried to check up on some documentation on this. Looks like you need to place the Chakra Provider in the root of your project.

Another problem may be that <React.StrictMode> doesn't render any visible UI, so you may have to remove that