Hi,
I have a working and running application using "next": "13.4.10" with the app router and deployed with vercel using node 18.x.x.
I'm trying to animate a simple text using the useEffect hook in a client component like this:

"use client";

import { useEffect, useState } from "react";

export default function AnimatedText() {
  const [state, setState] = useState<string>("logo");

  useEffect(() => {
    console.log("Trigger animation");
    const animateText = setTimeout(() => {
      setState("text");
    }, 2250);
    const animateExit = setTimeout(() => {
      setState("exit");
    }, 4500);
    return () => {
      clearTimeout(animateText);
      clearTimeout(animateExit);
    };
  }, []);

  return <p>{state}</p>
}

This component is imported inside the app/page.tsx.
So, if understand well, I should have a text that update it's state when the component is mounted and displayed as a paragraph inside my page.

When my link is deployed on Vercel and when I open the link in a new tab, nothing happen.
I have to refresh the page so the inside of the useEffect is working properly.

Is anyone have an idea?
Thanks!