Vista previa de video en React Typescript

Estoy intentando crear una vista previa de video para un proyecto interno, con “React y Typescript” usando react hooks, a continuación está el código del componente:

import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {

const { register, handleSubmit } = useForm<inewvideo>();
const [file, setFile] = useState<any>();

const videoChangeHandler = (event: React.ChangeEvent<htmlinputelement>) => {
    console.log(event.currentTarget.files![0]);
    setFile(event.currentTarget.files![0])
};
useEffect(() => {
    console.log("use effect", file)

}, [file])

return (<div>
    <input accept="video/mp4, video/mov" onchange="{videoChangeHandler}" type="file">
    {
        file ? (
            <div>
                {file}
            </div>
        ) : ("No Video")
    }
</div>)
};

export default NewVideo;

Pero no puedo establecer el archivo, está arrojando el siguiente error:

Necesito renderizar la carga de video y dar opciones para las funciones de captura de pantalla y recorte, pero estos son las etapas posteriores.