The video is stopped in between after few minutes?

import React, { useRef } from "react";

const VideoPlayer = ({ mediaElement, isHidden, canvasRef, voiceOn }) => {
    const videoRef = useRef(null);

    const handleVideoEnd = () => {
        console.log("Video has ended");
    };

    return (
        <>
            <div className="videoWrap">
                <video
                    ref={videoRef}
                    id="mediaElement"
                    className={mediaElement ? "visible" : ""}
                    muted={!voiceOn}
                    onEnded={handleVideoEnd}
                    autoPlay={true}
                    loop
                    preload="yes"
                    style={{
                        padding: 0,
                        width: "324px",
                        height: "inherit",
                        transition: "opacity 0.5s ease-in-out 0s",
                        display: isHidden ? "none" : "flex"
                    }}
                ></video>

                <canvas
                    ref={canvasRef}
                    id="canvasElement"
                    className="videoEle"
                    style={{ display: !isHidden ? "none" : "flex" }}
                    muted={!voiceOn}
                ></canvas>
            </div>
        </>
    );
};