Stutter and Jumping when reaching the end of list

const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => ref.current,
    estimateSize: () => totalDBRowCount,
    overscan: 20,
  })

  const fetch = useCallback(
    function (element?: HTMLDivElement | null) {
      if (element) {
        const { scrollHeight, scrollTop, clientHeight } = element

        if (
          !isFetching &&
          scrollHeight - scrollTop - clientHeight < 1 &&
          totalFetched < totalDBRowCount
        ) {
          fetchNextPage()
        }
      }
    },
    [totalFetched, totalDBRowCount, isFetching, fetchNextPage]
  )

  return (
    <Layout className="lg:pl-16">
      <Sidebar className="hidden lg:fixed lg:flex lg:w-16" />

      <InfiniteScroll divRef={ref} onScroll={fetch}>
        <Sticky>
          <Header icons="mobile" />

          <FilterCustomers table={table} />

          <StickyTableHeader table={table} />
        </Sticky>

        {virtualizer && (
          <TableCustomers table={table} virtualizer={virtualizer} />
        )}
      </InfiniteScroll>
    </Layout>
  )

const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => ref.current,
    estimateSize: () => totalDBRowCount,
    overscan: 20,
  })

  const fetch = useCallback(
    function (element?: HTMLDivElement | null) {
      if (element) {
        const { scrollHeight, scrollTop, clientHeight } = element

        if (
          !isFetching &&
          scrollHeight - scrollTop - clientHeight < 1 &&
          totalFetched < totalDBRowCount
        ) {
          fetchNextPage()
        }
      }
    },
    [totalFetched, totalDBRowCount, isFetching, fetchNextPage]
  )

  return (
    <Layout className="lg:pl-16">
      <Sidebar className="hidden lg:fixed lg:flex lg:w-16" />

      <InfiniteScroll divRef={ref} onScroll={fetch}>
        <Sticky>
          <Header icons="mobile" />

          <FilterCustomers table={table} />

          <StickyTableHeader table={table} />
        </Sticky>

        {virtualizer && (
          <TableCustomers table={table} virtualizer={virtualizer} />
        )}
      </InfiniteScroll>
    </Layout>
  )

  return (
    <TableBodyElement className={cn("flex flex-col gap-y-4", className)}>
      {virtualizer.getVirtualItems().map((virtualRow) => {
        const row = rows[virtualRow.index] as Row<TData>

        return (
          <TableRow
            key={row.id}
            className="flex w-full flex-row items-center rounded-t-md border"
          >
            {row.getVisibleCells().map((cell) => {
              return (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              )
            })}
          </TableRow>
        )
      })}
    </TableBodyElement>
  )

  return (
    <TableBodyElement className={cn("flex flex-col gap-y-4", className)}>
      {virtualizer.getVirtualItems().map((virtualRow) => {
        const row = rows[virtualRow.index] as Row<TData>

        return (
          <TableRow
            key={row.id}
            className="flex w-full flex-row items-center rounded-t-md border"
          >
            {row.getVisibleCells().map((cell) => {
              return (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              )
            })}
          </TableRow>
        )
      })}
    </TableBodyElement>
  )