I want to apply virtualized rows and react full width together

Question

<div
      ref={tableContainerRef}
      style={{
        overflow: 'auto', //our scrollable table container
        position: 'relative', //needed for sticky header
        height: '100%', //should be a fixed height
      }}
    >
      {/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */}
      <table className='dark:text-slate-300 w-full'>
        <thead className='sticky top-0 z-[1] text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-900/20 text-xs font-semibold uppercase '>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr
              key={headerGroup.id}
              style={{ display: 'flex', width: '100%' }}
              className='border-slate-200 dark:border-slate-700 border-t border-b'
            >
              {headerGroup.headers.map((header: any) => {
                return (
                  <th
                    key={header.id}
                    className=' flex items-center p-3'
                    style={{
                      display: 'flex',
                      width: header.getSize(),
                    }}
                  >
                    <div
                      {...{
                        className: header.column.getCanSort()
                          ? 'cursor-pointer select-none flex flex-row gap-2 items-center'
                          : '',
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                      {{
                        asc: (
                          <KeyboardArrowUpIcon
                            style={{ fill: '#4a586b', width: '18px' }}
                          />
                        ),
                        desc: (
                          <KeyboardArrowDownIcon
                            style={{ fill: '#4a586b', width: '18px' }}
                          />
                        ),
                      }[header.column.getIsSorted() as string] ?? null}
                    </div>
                  </th>
                );
              })}
            </tr>
          ))}
        </thead>
        <tbody
          style={{
            display: 'grid',
            height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
            position: 'relative', //needed for absolute positioning of rows
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow: any) => {
            const row = rows[virtualRow.index] as Row<T>;
            return (
              <tr
                data-index={virtualRow.index} //needed for dynamic row height measurement
                ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
                key={row.id}
                className='p-1'
                style={{
                  position: 'absolute',
                  transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
                  width: '100%',
                }}
              >
                {row.getVisibleCells().map((cell) => {
                  return (
                    <td
                      key={cell.id}
                      className='text-[#333] py-1 px-3'
                      style={{
                        width: cell.column.getSize(),
                      }}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>

https://codesandbox.io/p/sandbox/festive-wind-8dj7ch?file=%2Fsrc%2FApp.js%3A2%2C39

If done as in the above codesandbox, it becomes fixed at 150px and does not become full width

If you know how to solve it, I'd appreciate it if you could let me know I applied it to the code sand box just like my situation.