Chakra UI Card and CardBody won't render in React App

My apologies if this question has been asked, but I can't find the issue I'm having. I'm using React Vite and Chakra-UI. Everything works fine, until I use Card.

This works fine (Item and Flex also work):

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

export const LocationItemCard = () => {

    return (
        <>
            <p>test</p>
 
        </>
    );

}

However, as soon as I add Card and CardBody, nothing works anymore:

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>
        </>
    );
}

This is my root app, which won't work without adding the value defaultSystem:

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>,
)

When I display the images without Card, they do show up and I can style them. It's been a year since I worked with React/Vite and Chakra. I had to upgrade to other versions and now I'm having all these issues. Perhaps the different versions are collapsing somehow.

I have already reinstalled Chakra, I've tried downgrading to React 18. Nothing helps. Should I just give up Card and use Box or something else to style them? Or is there a stupid mistake I'm missing?

This is the browser console error:

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

Chakra UI v2 uses a compound API. Here's an example: https://stackblitz.com/edit/ewdzp48x?file=src%2FApp.tsx

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

export const App = () => {
  return (
    <Card.Root h="xl" w="100%" bg="blue.300">
      <Card.Body gap="2">
        <Card.Title mt="2">Title</Card.Title>
        <Card.Description>
          <p>test</p>
        </Card.Description>
      </Card.Body>
      <Card.Footer justifyContent="flex-end">
        <Button variant="outline">View</Button>
        <Button>Join</Button>
      </Card.Footer>
    </Card.Root>
  );
};