So basically, the form HTML is rendered by external source. I only provide the container div in the component so it knows where to put their form.

Now I'm trying to get select inputs inside the form but the code below doesn't work and I think it's cause the timing of form being rendered isn't guaranteed by isScriptLoaded - meaning the form could be rendered after the script is loaded so useEffect won't be able to catch here.

Any idea on how you could solve this problem ?

  const [isScriptLoaded, setIsScriptLoaded] = useState(false);

  const onLoad = () => {
    setIsScriptLoaded(true);
  };


  useEffect(() => {
    const formContainer = document.querySelector('#form-container');

    if (isScriptLoaded) {
      const select = formContainer.querySelector('select');
    }
  }, [isScriptLoaded]);


  return (
      <>
        <Script onLoad={onLoad} src="//external-source-example.js" />

         <div id="form-container" />
      </>
  )