Access React DOM Element from external script

Question

I am trying to get access to a React DOM element 'id' from an external script file. I believe my script is being imported correctly as console.log('test') from the file is working, though console.log(myDiv) returns null.

How can I achieve this in React?

// COMPONENT

import './../data/script.ts';

  render() {
    return (
        <div id='targetDiv'>
          <p>{This will be populated from my external script file...}</p>
        </div>
    );
  }

// SCRIPT

  var myDiv = document.getElementById('targetDiv');
  console.log(myDiv);

Answer 1

To fix the issue I needed to import my external script as a function, and then call the function after the component mounted:

// COMPONENT

import { myScript } from './../data/script';

  componentDidMount() {
    {
      myScript();
    }
  }

  render() {
    return (
        <div id='targetDiv'>
          {My script now renders correctly inside the div}
        </div>
    );
  }

// SCRIPT

  var myDiv = document.getElementById('targetDiv');
  const d = document.createElement('p');
  myDiv.appendChild(d);