Chakra UI Components Not Rendering about chrome-extension-boilerplate-react-vite HOT 3 OPEN

const Popup = () => {
  return (
    <ChakraProvider>
      <Flex w={'100vw'} h={'100vh'} justifyContent={'center'} alignItems={'center'}>
        <Button colorScheme="teal">Button</Button>
      </Flex>
    </ChakraProvider>
  );
};

const Popup = () => {
  const theme = useStorage(exampleThemeStorage);

  const openNewTabPage = () => {
    chrome.tabs.create({ url: chrome.runtime.getURL('/src/pages/dashboard/index.html') });
  };

  return (
    <ChakraProvider>
      <div className="App" style={{ backgroundColor: theme === 'light' ? '#fff' : '#000' }}>
        <header className="App-header" style={{ color: theme === 'light' ? '#000' : '#fff' }}>
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/pages/popup/Popup.tsx</code> and save to reload.
          </p>
          {/* Your popup UI components here */}
          <button
            style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}
            onClick={exampleThemeStorage.toggle}>
            Toggle theme
          </button>
          <Button colorScheme="teal" onClick={openNewTabPage}>
            Open New Tab Page
          </Button>
          <Button colorScheme="blue">test</Button>
        </header>
      </div>
    </ChakraProvider>
  );
};