React - How to get selected video display/preview from input

Question

I'm trying to get a video preview after selecting a video from input type file. But it is not giving me video preview however if it is working fine if i select a image but it is not working fine for video.

import React, { useState } from 'react';

const [imgAvatar, setImgAvatar] = useState('')

    const handleFile = e => {
        const file = e.target.files[0]
        const fileReader = new FileReader()


        fileReader.onloadend = (e) => {
            setImgAvatar(e.target.result)
        }
        fileReader.readAsDataURL(file)
     }

return(
    <video>
        <source src={imgAvatar} type="video/mp4"></source>
    </video>
    <img src={imgAvatar} alt='...'></img>
)