React Vite项目中Chakra UI的Card与CardBody组件无法渲染的问题求助

抱歉打扰大家，这个问题可能有人问过，但我实在找不到对应的解决方案😅。我现在用的是React + Vite + Chakra-UI，大部分组件（比如Item、Flex）都能正常工作，但一用到Card组件就彻底崩了。

先看我能正常运行的代码（导入了Card但没实际使用的情况）：

import React from 'react';
import { Card, CardBody } from '@chakra-ui/react';

export const LocationItemCard = () => {
  return (
    <>
      <p>test</p>
    </>
  );
}

但只要我把Card和CardBody实际加入渲染结构，页面就完全无法正常显示了：

import React from 'react';
import { Card, CardBody } from '@chakra-ui/react';

export const LocationItemCard = () => {
  return (
    <>
      <Card h="xl" w="100%" bg="blue.300" >
        <CardBody>
          <p>test</p>
        </CardBody>
      </Card>
    </>
  );
}

我的根组件代码是这样的——而且必须加上defaultSystem才能让Chakra的基础组件正常工作，不然连最基本的样式都加载不了：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider value={ defaultSystem }>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)

距离我上次用React/Vite+Chakra已经一年了，这次升级了依赖版本后就出现各种奇怪的问题。我已经试过重新安装Chakra、降级到React 18，但都没解决问题。现在纠结到底是干脆放弃Card组件，用Box自己手写样式，还是说我哪里犯了个低级错误没发现？

浏览器控制台抛出的具体错误信息是：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

内容来源于stack exchange