Table: set scroll tbody with fixed header

Просьба, подсказать, как корректно спозиционировать thead, таким образом, чтобы, область tbody скролилась по горизонтали и вертикале, при этом thead оставался зафиксирован при прокрутки по вертикале и также скролился одновременно с tbody по горизонтали при этом скорлбар не залазил на thead пробовал следующем образом, при скроле по вертикале выглядит корректно но при скроле по горизонтали thead остается зафиксирован

const TableContainer = styled.div`
    display: block;
    width: 100%;
    height: 350px;
    user-select: none;
    border: 1px solid rgb(223,226,234);

    .wrapper {
        height: 100%;
        width: 100%;
        overflow: auto;
    }

    .tr {
        display: flex;
        width: fit-content;
        height: 27px;
        border-bottom: 1px solid rgb(223,226,234);
    }

    .th,
    .td {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;     
        align-items: center;
        padding: 3px 5px;
        border-left: 1px solid rgb(223,226,234);
    }

    .thead {
        width: 100%;
        position: sticky;
        top: 0;
        display: block;
        overflow-x: none;
        background: rgb(223,226,234);
    }
    
    .tbody {
        height: 100%;
        display: block;
        overflow: auto;
        height: 350px;
    }

` 

return (
        <TableContainer>
            <div className='th-wrapper'>

                <div className='thead'>
                    {table.getHeaderGroups().map(headerGroup => (
                        <div {...{
                            key: headerGroup.id,
                            className: 'tr'
                        }}>
                            {headerGroup.headers.map(header => (
                                <div {...{
                                    key: header.id,
                                    className: 'th',
                                    style: {
                                        width: header.getSize()
                                    }
                                }}>
                                {flexRender(
                                    header.column.columnDef.header,
                                    header.getContext()
                                )}
                                </div>
                        ))}
                        </div>
                    ))}
                </div>


                <div {...{
                    className: 'tbody'
                }}>
                    {table.getRowModel().rows.map(row => (
                        <div {...{
                            className: 'tr',
                            key: row.id
                        }}>
                            {row.getVisibleCells().map(cell => (
                                <div {...{
                                    key: cell.id,
                                    className: 'td',
                                    style: {
                                        width: cell.column.getSize()
                                    }
                                }}>
                                {flexRender(
                                    cell.column.columnDef.cell,
                                    cell.getContext()
                                )}
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        </TableContainer>