how can I update a video by new one selected from pc by using input file, in react js?

I am trying to update the 'src' of video tag by updating state variable. In state variable I am storing the video file which I am selecting from my pc using file input.

I have tried it by using FileReader, it creates a URL for newly selected video and video tag's src attribute also being assigned new URL but when I try to play that video it does not play. I have tried it in rect js. I am sharing my code below:

I just want that when I select video form my PC using file input then that select video file should ne play in video tag I have created.`function EditProfile() {const handleVideoChange = (event) => {const file = event.target.files[0];setSelectedVideo(file);

    const reader = new FileReader();    reader.onload = (event) => {      setProfileVideo(event.target.result);    };    reader.readAsDataURL(file);};const handleSave = () => {    // setProfileVideo(selectedVideo);    console.log("profileVideo : ",profileVideo);    setVisible2(!visible2);};

return (<>

<div className='user-bio-video-clip mt-lg-0 mt-4'><VideoPlayer                                                    videoUrl={profileVideo}                                                    width='100%'                                                /><Link className='edit-bio-video-clip' onClick={() => setVisible2(!visible2)}>                                                    Edit Video</Link></div>    {/* modals to update video */}<CModal        className='photos-upload-modal'        alignment="center"        visible={visible2}        onClose={() => setVisible2(false)}        aria-labelledby="VerticallyCenteredExample"        size='lg'><CModalBody><div className='upload-photo-modal-body-content film-upload-content text-center'><h3>upload your video</h3><div className='text-center mt-4'><label htmlFor='photoInput' className='secondary_outline_btn'>                        Browse</label><input type='file' id="photoInput" onChange={handleVideoChange} accept="video/*" hidden/></div><div className='mt-4'><CButton className='primary_btn' onClick={handleSave}>                        Save</CButton></div></div><CButton className='close_modal_btn' onClick={() => setVisible2(false)}></CButton></CModalBody></CModal></>

)}

export default EditProfile; `