AgGrid: Column Headers Misalign when scrolling down through table body

I am using React AgGrid. I have a table that contains about 25 rows and 10 columns with headers and sub-headers.

When I scroll all the way the to top right of the grid and then scroll down to the point where the column headers start to stay fixed and float down the screen and I scroll down, the column headers become misaligned (see attached screencaps).

I’ve tried removing columns from the column defs and it doesn’t seem to be a specific column that is causing the issue, but rather the way the grid is handling positioning the column headers.

Some potential hints.

1. I have a sidebar nav next to the table. When I comment that out, the column defs don’t shift over as much when I scroll down.

2. When I remove the left and right padding from the grid, it also doesn’t shift over as much.

3. When I do both 1 and 2, the grid columns behave correctly.