alert() inside useEffect gets triggered before the browser painting is completed. Shouldn’t it trigger after the browser is painted?

Let’s consider this to be the component:

const Alert = () => {
        useEffect(() => {
            alert("hello");
        }, []);
        return <div>Alert</div>;
    };

My understanding is that useEffect runs after the browser has painted.

But in this code, why does the alert pop up before the browser is painted completely?

NOTE: If it does not happen the first time, try refreshing it.