A formatter element rendered within the grid with a `tabIndex=0` breaks `scrollIntoView` functionality

[sayanything830]

Describe the bug

When a formatter (column headerRenderer or formatter) renders an element with a tabIndex="0" attribute, the horizontal scroll jumps beyond expected focus. I believe this is due to a query selector using [tabIndex="0"] called within the scrollIntoView function here: https://github.com/adazzle/react-data-grid/blob/main/src/DataGrid.tsx#L775

To Reproduce

1. Create a grid with several columns that have a specified width so the grid may scroll horizontally depending on window size
2. Give one column definition a formatter that returns an element with a tabIndex="0" attribute
3. When clicking on a cell within a column farthest from the tabIndex="0" column, note the cell first gets focus
4. Click again on that focused cell and the grid scroll horizontally jumps to the tabIndex column, but the focused cell is the same (and may not be in view anymore)

Link to code example: https://codesandbox.io/s/elastic-snowflake-t9siek

In the code sandbox link, keep the browser tab width small and scroll all the way to the right-most column. Click on a row cell (column FIVE row foo) more than once and see the grid scroll far to the left.

Expected behavior

The focused cell should remain in the grid view.

Environment

• react-data-grid version: 7.0.0-beta.20 (but this appears to be an issue since beta-13, does not repro in beta-12)
• react/react-dom version: 18.0.0