How to use Intro.js-react with MUI DataGrids?

Question

I'm using React, Material-UI, MUI DataGrids, and intro.js-react

I'm trying to give users a tour of a screen that contains a MUI DataGrid.

The steps in the tour involve highlighting specific elements within the MUI DataGrid.

My steps component looks like this:

<Steps
    enabled={stepsEnabled}
    steps={steps}
    initialStep={0}
    onExit={() => setStepsEnabled(false)}
    options={{ showBullets: false, showButtons: true, exitOnOverlayClick: true }}
/>

My steps object looks like this:

const steps = [
    {
      element: ".documentSetList",
      intro: 'This is the doc review screen.'
    },
    {
      element: ".introCheckbox",
      intro: 'These are checkboxes.'
    },
  ]

The first step highlights the entire Data Grid, which works fine. The second should highlight a column header within the Data Grid. The second step is not working. It seems like the IntroJS can't find the elements class, so the step just appears in the middle of the screen without pointing to the element.

I've tried using the built in css classes which looks like this:

MuiDataGrid-columnHeaderTitle css-1jbbcbn-MuiDataGrid-columnHeaderTitle

I've also tried adding a custom class with headerClassName property in the data grids column object, which looks like this:

{
        field: 'natv',
        headerName: 'natv',
        width: 51,
        filterable: false,
        hideable: false,
        headerClassName: "introCheckbox",
    },

Neither of these attempts has worked.

My guess is that this has something to do with how data grids and IntroJS are rendered, either that or IntroJS doesn't play nicely with deeply nested components, but haven't it figured out yet.

Any help would be appreciated.