React Virtuoso and Shadcn ScrollArea

[TheAimHero]

How am i supposed to use ScrollArea component with Virtuoso Table.

    <TableVirtuoso
      overscan={{ main: 5, reverse: 5 }}
      endReached={fetchNextPage}
      style={{ height }}
      rows={rows.length}
      totalCount={rows.length}
      components={{
        TableFoot: ({ children, ...props }) => (
          <TableFooter className='p-2 text-center' {...props}>
            <TableRow>
              <TableCell colSpan={columns.length}>
                <Button
                  onClick={fetchNextPage}
                  variant='ghost'
                  disabled={!hasNextPage || isLoading}
                >
                  {children}
                </Button>
              </TableCell>
            </TableRow>
          </TableFooter>
        ),
        Table: ({ children, ...props }) => (
          <Table className={cn('pr-2', className)} {...props}>
            {children}
          </Table>
        ),
        TableRow: TableRowComponent(rows),
        TableHead: ({ children, ...props }) => (
          <TableHeader {...props}>{children}</TableHeader>
        ),
        TableBody: ({ children, ...props }) => (
          <TableBody {...props}>{children}</TableBody>
        ),
        // eslint-disable-next-line react/display-name
        Scroller: forwardRef(({ children, ...props }, ref) => (
          <ScrollArea {...props} ref={ref} className='h-full'>
            {children}
            <ScrollBar orientation='vertical' />
            <ScrollBar orientation='horizontal' />
          </ScrollArea>
        )),
      }}
      fixedFooterContent={() =>
        isLoading ? 'Loading...' : hasNextPage ? 'Load More' : 'No more data'
      }
      fixedHeaderContent={() =>
        table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id} className='sticky top-0'>
            {headerGroup.headers.map((header) => {
              return (
                <TableHead className='text-center' key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </TableHead>
              );
            })}
          </TableRow>
        ))
      }
    />

This is how far i have reached. But it does not seem to work (still showing the default browser scrollbar), am i missing something.
Using the table components from shadcn as well.