React setTimeout inside useLayoutEffect not delaying animation if the timeout duration is too short

Question

I'm trying to create an animation, where the text appears in the screen and have the option to delay the animation using a timeout.

The strange thing is, when the app first render on the browser, it works as intended, but if I manually refresh "f5", the delay is only visible if it's a longer timeout duration, any value lower than 500ms for example, the others the delay is no visible.

I've already tried to create a custom hook, use "useEffect" and "useLayoutEffect" but this strange behavior keep happening.

Here is the component.

const FadeInText = ({text, style, timeout, noScroll}) => {
const textRef = useRef(null)
const [visible, setVisible] = useState()
    
useLayoutEffect(() => {
    setVisible(timeout !== undefined ? {animation: "none", 
          opacity: 0} : {})
        let time = setTimeout(() => {
            setVisible({})
        }, timeout)
        return () => clearTimeout(time)
    },[timeout]) 

    return <p ref={textRef} style={{...visible,...style}} className="fade-in-text">{text}</p>
}

export default FadeInText;

Here are the CSS rules applied to the text

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-text {
    font-size: 1rem;
    color: white;
    animation: fade-slide-up 0.2s ease-in;
}

Here are some cases where I use this component, the only component where the delay is visible, is the one with the timeout set as 600

            <FadeInText style={{fontSize: "5vw"}} text="R" timeout={200}  />
            <FadeInText style={{fontSize: "5vw"}} text="A" timeout={300}  />
            <FadeInText style={{fontSize: "5vw"}} text="N" timeout={400}  />
            <FadeInText style={{fontSize: "5vw"}} text="D" timeout={600}  />