side effect in the form of a black screen when switching video tag video

Question

I want to download some videos from the network and play them in a circle. I need to pre-download them so that when I play, I do not see any delays

I have some not perfect component on which I test the video:

import video1 from './../../assets/videos/2s1.mp4';
import video2 from './../../assets/videos/2s2.mp4';
import video3 from './../../assets/videos/2s3.mp4';

const videos = [video1, video2, video3];

    const VideoPlayer = ({
                             videos = [],
                             disablePictureInPicture = true,
                             loop = false,
                             muted = true,
                             playsInline = true,
                             preload = 'auto',
                             autoPlay = true,
                             controls = true,
                             width = '100%',
                             ...props
                         }) => {
        const ref = useRef();
        const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
    
    const handleVideoEnd = () => {
        setCurrentVideoIndex((currentVideoIndex + 1) % videos.length);
    };
    
    const handleSeeked = () => {
        ref.current?.play();
    };
    
    const onCanPlayThrough = () => {
        ref.current?.play();
    };
    
    return (
        <video
            ref={ref}
            src={videos[currentVideoIndex]}
            preload={preload}
            width={width}
            muted={muted}
            autoPlay={autoPlay}
            disablePictureInPicture={disablePictureInPicture}
            playsInline={playsInline}
            controls={controls}
            onEnded={() => {
                handleVideoEnd();
            }}
            controlsList="nofullscreen nodownload noremoteplayback noplaybackrate foobar"
        >
        
        </video>
    );

};

export default VideoPlayer;

between the videos I see a black screen. And this is not very noticeable in the browser of my laptop but it is very noticeable on mobile devices for which I develop an application

i tried to use the ready-made component of the player https://github.com/CookPete/react-player?tab=readme-ov-file but the problem is the same

for preload video I tried to download and cache it via tag link using helmet.

<HelmetProvider>
    <Helmet>
        <link rel="preload" href="https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4" as="video" type="video/mp4" />
    </Helmet>
</HelmetProvider>

but I don't see downloading this video in the network tab