Why is useEffect render-blocking(paint-blocking) in the tooltip example?

I am following the tooltip example for the useLayoutEffect hook from the new react docs. From their explanation, I assume that the following is the order of execution of things:

react render() --> reconciliation --> update DOM if virtual dom is changed --> DOM update finishes --> useLayoutEffect is executed --> broswer paints and triggers some sort of LayoutPaint event --> useEffect is triggered

To verify this, I swapped useLayouteffect hook with useEffect hook in the tooltip.js file of the docs example.

This is the modified example

I have put a few for loops to slow down the execution of useEffect hook. Now when you load the modifed example and move your mouse over to any of the three buttons, you will see first paint with tooltip in wrong position and then the useEffect takes 1-2s and then you will see another repaint with the tooltip at correct position. So far so good, but now any later mouseovers on the same button, you will see that the wrong-position-paint waits for useEffect to finish and then the correct-position-paint happens within a few miliseconds. So I have two questions:

1. Why does later mouseovers cause useEffect to become render-blocking?

2. How does react make sure that useLayoutEffect stops browser paint from happening and if any state update within useLayoutEffect is mentioned then triggers another render->repaint while completely disallowing the previous browser paint to occur at all. In our case the tooltip at -60px is not painted at all.

from Why is useEffect render-blocking(paint-blocking) in the tooltip example?