Scroll to target

[baguilar-work]

For the life of me I cant figure out why the scroll to the element does not work on my project. Im guessing its something with my app but im not sure. Is there something special that needs done on the ReacTour side that im missing? Has anyone else had this issue?

The app is using Bootstrap and Mui.

My implementation of the tour is pretty simple:

<Tour
        steps={tourSteps}
        isOpen={isTourOpen}
        onRequestClose={() => setOpenTour(false)}
        accentColor='#1F4377'
        startAt={0}
        rounded={3}
        onAfterOpen={disableBody}
        onBeforeClose={enableBody}
      />

const tourSteps = [
    {
      content: ({ inDOM }) => (
        <box>
          <h3>MY PROFILE</h3>
          <p>....</p>
        </box>
      ),
    },
    {
      selector: '.css-wtk2ay',
      content: ({ inDOM }) => (
        <box>
          <h3>AGENT PHOTO</h3>
          <p>....</p>
        </box>
      ),
    },
    {
      selector: '[data-testid="agentInformation"]',
      content: ({ inDOM }) => (
        <box>
          <h3>AGENT INFORMATION</h3>
          <p>...</p>
        </box>
      ),
    }]

[baguilar-work]

Incase anyone comes by this same issue. There was a overflow: "auto", on one of the main DIV in the layout. It keep it from being able to scroll to the element correctly.