I have a form that submits a file. Currently the user's input is used to set the state of a variable to a file; instead, I'd like to set the state to a hardcoded static file that I imported locally

This is the original code that sets the state using user input:

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>

When testing is the state was set properly using console.log({file}), I will get a return with the file input...

But I want to get rid of the option to input a file and simply set the state with a static file... this is similar to what I tried:

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>

when I console.log the file, I get null... when testing if the file was set using console.log({file}), I get a null response

After quite a bit of digging, I have not been able to come up with any solid solutions. I'm stuck with this, so any help is greatly appreciated, thank you