Fixed Header + selectableRowsComponent causes select all to only select one row when scrolling

[Logan-Harris24]

Describe the bug

Title says it all, but basically the issue is that applying the combination of a custom selectableRowsComponent and a fixedHeader causes the select all rows functionality to fail when

To Reproduce

Steps to reproduce the behavior:

1. Apply a custom selectableRowsComponent as well as the fixedHeader property
2. Display enough rows per page to allow for scrolling
3. Scroll down enough in the table so that one of the underlying row checkboxes overlaps with the header
4. Attempt to use select all button

Current behavior

The select all button should successfully select all records.

Expected behavior

The select all button only selects 1 record (the record that exists "behind/underneath" the fixed header).

Code Sandbox, Screenshots, or Relevant Code

For the code sandbox below, simply increase the rows per page and then proceed with the repro steps: (https://codesandbox.io/s/react-data-table-materialui-forked-vhflyy)

In the image below you'll notice that you can see the row underneath the fixed header, and after clicking select all it only selects that underlying row:

Versions (please complete the following information)

• React: 18.2.0
• Styled Components: 5.3.11
• OS: Windows
• Browser: Chrome

Additional context

As stated, the select all button only selects 1 record the record that exists "behind/underneath" the fixed header. This seems to be the record that is "behind/underneath" the fixed header, suggesting that the table rows are taking precedence over the fixed header itself, and so clicking on the select all actually results in clicking on the row that exists underneath.

This issue is rather inconvenient because it means that you cannot use a custom selectableRowsComponent and fixed header without encountering this bug, and therefore have to utilize the default component.