So usually there are really easy ways to avoid mutating your DOM directly from React but unfortunately I'm not in one of those situations right now. I'm using an API that then embeds a lot of content on to my page into a div with an id of dashboard.

I need to manipulate the content on the page and move certain elements around and things. Currently I add an event listener to an element that exists before I call the API, with useEffect() like so:

useEffect(() => {
    /*
     Some code here...
    */

    const setupDashboard = (dashboard) => {

      document.querySelector('#run').addEventListener('click', () => {
        dashboard.send('dashboard:run')
        console.log("Run clicked")
      })

      console.log(document.querySelector("[data-title='States']"))
    }

    LookerEmbedSDK.createDashboardWithId(114)
      .appendTo('#dashboard')
      .on('dashboard:run:start',
        /*() => updateState('#dashboard-state', 'Running')*/
      )
      .on('dashboard:run:complete',
        /*() => updateState('#dashboard-state', 'Done')*/
      )
      .build()
      .connect()
      .then(setupDashboard)
      .catch((error) => {
        console.error('An unexpected error occurred', error)
      })
    });

The piece of code that adds the event handler to the button works, but the next console statement returns null. So it seems like there should be a better way to manipulate the DOM especially since I'm going to completely change it with all my modifications. I'll need to use all sorts of query selectors, deletions, appending and more. What's the best practice for all that.

Edit: to be clear, after the page loads if I run that line in the console it gets the element