Using React Radix UI Table with Virtuoso

Question

I'm using Radix UI Themes Table to show data. The problem is that I must show many rows, and this makes everything slow. I wanted to implement virtual rendering with react virtuoso and it somehow works but the style of the table is messed up and I get some errors like:

<div> cannot appear as a child of <tbody>.
<tr> cannot appear as a child of <tr>

Here is a code snippet of what I have so far:

import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { Table } from "@radix-ui/themes"
import { useState } from "react"
import { TableVirtuoso } from 'react-virtuoso';

const TableScrollArea = () => {
    const [scrollParent, setScrollParent] = useState();

    // Create an empty array to store the objects
    const dataArray = [];

    // Define the data to be filled in the objects
    const data = {
        name: 'AAA',
        email: 'AAA',
        title: 'AAA',
    };

    // Fill the array with 1000 entries, each containing the data
    for (let i = 0; i < 10000; i++) {
        dataArray.push({ ...data });
    }

    const TableRow = ({ person }) => {
        return (
            <Table.Row>
                <Table.RowHeaderCell>{person.name}</Table.RowHeaderCell>
                <Table.Cell>{person.email}</Table.Cell>
                <Table.Cell>{person.title}</Table.Cell>
            </Table.Row>
        )
    }


    return (
        <ScrollAreaPrimitive.Root>
            <ScrollAreaPrimitive.Viewport ref={setScrollParent} className={`h-[300px]`}>
                
                <Table.Root>
                    <Table.Header>
                        <Table.Row>
                            <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
                            <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
                            <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        <TableVirtuoso
                            data={dataArray}
                            itemContent={(index, person) => <TableRow person={person} />}
                            customScrollParent={scrollParent ?? undefined}
                        />
                    </Table.Body>
                </Table.Root>

            </ScrollAreaPrimitive.Viewport>
            <ScrollAreaPrimitive.Scrollbar
                orientation="vertical"
            >
                <ScrollAreaPrimitive.Thumb />
            </ScrollAreaPrimitive.Scrollbar>
        </ScrollAreaPrimitive.Root>
    )
    };
    export default TableScrollArea