Registration form with firebase and chose avatar

I am developing an application for my own progress and learning. React application with firebase. Authorization form: name, email, password and avatar

Add my file

const [file, setFiles] = useState<File>();

const handleFileEnter = (event: React.FormEvent) => {
const file = (event.target as HTMLInputElement).files

if (file && file.length > 0) {
    setFiles(file[0])
}};

and dispatch them

const storageRef = ref(storage, `${displayName + date}`);
uploadBytesResumable(storageRef, file)....

Everything is ok with the registration form, but I found one bug. If you do not add an avatar forcibly, then the avatar is displayed in the application as a picture not found. I tried to make the default behavior, if the file is not selected, then put the default avatar, but when submitting the form, the firewall always sends some data, even if the file was not selected.

So how can I check for the presence of an avatar in the state before submitting the form, and if there is nothing there, substitute the default image?