Tengo un formulario que envía un archivo. Actualmente, la entrada del usuario se usa para establecer el estado de una variable en un archivo; en cambio, me gustaría establecer el estado en un archivo estático codificado que importé localmente

Este es el código original que establece el estado usando la entrada del usuario:

 const [file, setFile] = useState(null); const onSubmit = async (e) => { //submit function } <form onSubmit={onSubmit}> <input type="file" onChange={(e) => setFile(e.target.files[0])} /> <button> Submit! </button> </form>

Cuando la prueba es que el estado se configuró correctamente usando console.log ({archivo}), obtendré un retorno con la entrada del archivo ...

Pero quiero deshacerme de la opción de ingresar un archivo y simplemente establecer el estado con un archivo estático... esto es similar a lo que probé:

 import exampleFile from file/example.mp4; const [file, setFile] = useState(null); const onSubmit = async (e) => { //submit function } const handleClick = () => { setFile({exampleFile}) } <form onSubmit={onSubmit}> <button onClick={handleClick}> Submit! </button> </form>

cuando hago console.log el archivo, obtengo un valor nulo... cuando pruebo si el archivo se configuró usando console.log({archivo}), obtengo una respuesta nula

Después de investigar un poco, no he podido encontrar ninguna solución sólida. Estoy atascado con esto, por lo que cualquier ayuda es muy apreciada, gracias