Imagine I have the following React Component

import { useEffect } from "react"

export default function AwesomeHelloWorld(props) {

    useEffect(() => {
        let targetDiv = document.getElementById("hello-world-component-will-use-this-after-load");
        if (targetDiv) {
            //Do something with retrieved div
        }
    }, []);

    return (
        <div>Hello World from a React Component</div>
    )
}

How can I build it into a single helloworld.js file such that someone can easily import the script into a regular html <script/> tag for use like this

<script async type="text/javascript" src="./helloworld.js"/>

Then inside their html body, they will have a div that the generated script above will act on after page load like this

<div id="hello-world-component-will-use-this-after-load"/>

Thank you