Simple Typed.js And React.useEffect() Not Running in Astro Project

I have scoured the internet for solutions to this problem and have been scratching my head for 2 or 3 days now trying to figure out why this simple piece of code is not working as intended.

Source:

const Hero = () => {
  const el = React.useRef(null);

  React.useEffect(() => {
    const typed = new Typed(el.current, {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 50,
    });

    return () => {
      typed.destroy();
    };
  });
  return (
    <Section>
      <div className="">
        <span ref={el} />
      </div>
    </Section>
  );
};
export { Hero };

Hero is a partial that I import into a .astro file to be part of my home page. I ripped the example right off the Typed.js GitHub. Section is another component that sets the view port of the page.

It seems that the useEffect hook is not called at all. console.log inside of it never prints anything. Am I missing something? These are obviously React components, React is installed in my project and the @astro/react adapter is also installed (and is imported into the astro.config.mjs as an integration).

Does this have something to do with Astro's static nature? SSR vs. CSR? I have been digging into this for too long and I am at a loss. Help is very much appreciated. Thank you!

You need to include your component in an .astro file like this:

<Hero client:load />

Without a client directive, Astro will only server-side render the component and not hydrate it, see Astro's framework components docs.

(And make sure to save the file itself as Hero.tsx)