Adding a scroll bar to the top of material-react-table?

Question

I am using material-react-table v2. I want to add a scrollbar to the top of the table.

<div style={{ position: 'relative' }}>
  <div
    style={{
      overflowX: 'auto',
      position: 'relative',
      whiteSpace: 'nowrap',
      top: '0',
      zIndex: 1,
    }}
  >
    <div
      style={{
        overflowX: 'scroll',
        height: '1px',
        position: 'absolute',
        width: '100%',
        zIndex: 2,
      }}
    >
      <div
        style={{
          width: '200%', // Adjust to your content's width
        }}
      ></div>
    </div>
  </div>

  <div style={{ overflowX: 'auto', marginTop: '16px' }}>
    {/* Your Material React Table */}
    <MaterialReactTable
      columns={columns}
      data={data}
      // Other props...
    />
  </div>
</div>

I already tried the above, however no scroll bar seems to be appearing at the top of the table.