Video does not play although the play() promise is fulfilled - React JS

Question

I have a problem when clone the scroll-to-view feature of tiktok. When I reload the page, the first video does not play in spite of being on viewport. I have logged the promise return by play() method, and it says resolved. Here is my code: `

 // play video in viewport (pause when out)
    const inViewport = useIntersection(videoRef, '-240px');
    useEffect(() => {
        if (inViewport) {
            setPlaying(true);
        } else {
            setPlaying(false);
        }
    }, [inViewport]);

useEffect(() => {
        const playPromise = videoRef.current.play();
        if (!playing) {
            if (playPromise !== undefined) {
                playPromise.then(() => videoRef.current.pause());
            }
        }

    }, [playing]);

` I check the return value of promise when pausing video to avoid this warning: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

On the other hand, when I code like following, it works correctly (means that the first video auto play because of being on view):

useEffect(() => {
        if (playing) {
            videoRef.current.play();
        } else {
            videoRef.current.pause();
        }
    }, [playing]);

Certainly, the above code block will cause: Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

What is happening? And how to fix it? Or any others ways to fix the warning? Thanks in advance.