How to play multiple expo av videos in sync?

Question

I am trying to play 2 expo-av videos in sync, my approach below. The problem is that the multiple videos I've tried, cannot start at the same time, either one or the other will starts earlier. The only problem i can think of is that, as stated in docs playbackObject.playAsync(): ... Playback may not start immediately after calling this function for reasons such as buffering. Make sure to update your UI based on the isPlaying and isBuffering properties of the AVPlaybackStatus .... However, even when listening for isLoaded and isBuffering to be true and false the videos cannot start in sync. Is there another flag I should be checking for to guarantee the video start with no lag (so that the 2 videos can start in sync) or what is the approach for this problem?

import { Video } from 'expo-av';
const videoRef1 = useRef();
const videoRef2 = useRef();

useEffect(() => {
        (async () => {
            try {
                await Promise.all([
                    videoRef1.current.loadAsync(
                        { uri: URL1 },
                        { shouldPlay: true }
                    ),
                    videoRef2.current.loadAsync(
                        { uri: URL2 },
                        { shouldPlay: true }
                    ),
                ]);
            }
            catch (e) {
                console.log(e.message)
            }

        })()
 }, [])

const renderVideoPlayer1 = () => (
        <Video
            ref={videoRef1}
            style={styles.media}
        />
    );

const renderVideoPlayer2 = () => (
        <Video
            ref={videoRef2}
            style={styles.media}
        />
    );

OR another implementation I've tried

import { Video } from 'expo-av';
const videoRef1 = useRef();
const videoRef2 = useRef();
const [isVideo1Ready, setIsVideo1Ready] = useState(false);
const [isVideo2Ready, setIsVideo2Ready] = useState(false);

useEffect(() => {
        (async () => {
            try {
                await Promise.all([
                    videoRef1.current.loadAsync(
                        { uri: URL1 },
                        { shouldPlay: false }
                    ),
                    videoRef2.current.loadAsync(
                        { uri: URL2 },
                        { shouldPlay: false }
                    ),
                ]);
            }
            catch (e) {
                console.log(e.message)
            }

        })()
 }, [])

useEffect(() => {
        if (isVideo1Ready && isVideo2Ready) {
            videoRef1.current.playAsync();
            videoRef2.current.playAsync();
        }
    }, [isVideo1Ready, isVideo2Ready])

const renderVideoPlayer1 = () => (
        <Video
            ref={videoRef1}
            style={styles.media}
            onPlaybackStatusUpdate={(playbackStatus) =>
                playbackStatus.isLoaded
                && !playbackStatus.isBuffering
                && setIsVideo1Ready(true)}

        />
    );

const renderVideoPlayer2 = () => (
        <Video
            ref={videoRef2}
            style={styles.media}
            onPlaybackStatusUpdate={(playbackStatus) =>
                playbackStatus.isLoaded
                && !playbackStatus.isBuffering
                && setIsVideo2Ready(true)}
        />
    );