Appending html tag with useEffect deletes document

I have a child component that creates a tag using useEffect and is supposed to display said tag in the parent component; however, when it runs, it deletes the whole document and only displays such tag.

Here's the render method of the parent component:

  render() {
    return (
      <>
        <div id="input">
          <form onSubmit={this.handleSubmit} encType='multipart/form-data'>
            <label>
              Name:
              <input type="text" value={this.state.value} } />
              <input type="file" accept=".pdb" />
            </label>
            <input type="submit" value="Submit" />
          </form>
        </div>
        <div id="display"> 
          <Display fileURL={this.state.url}/>
        </div>
      </>
    );

And this is the Display component:

export default function Display ({fileURL}) {

   useEffect(() => {
      const div = document.getElementById("display");
      const script = document.createElement("script");
      script.type = 'text/JavaScript';
      script.innerHTML = "foo"
      div.append(script);
   }, [fileURL]);

   return (
      <>
      </>
   );
 }

But when it displays in the browser, only the foo part is rendered. I need help figuring out why is this happening, thank you.