reactjs clear file input field after submit

I'm trying to delete my file input field data from e.target but i need the rest of the e.target data to send to emailjs.

The problem is when user uploads a file in my form, the file is most of the time bigger than 50kb and this is the limit for my account on emailjs.

I don't need to send my file to emailjs but i need it to just be stored in my database.

I have tried to clear the form field before sending it to emailjs with fileUpload.current.value = ""; but the data is still actief in e.target.

This is e.target Data. i need the data to stay in this way in e.target to send to emailjs

<form class="Grade_inputForm__1lbhQ" autocomplete="off">
<div class="Grade_input_container__3ztZk css-vurnku">
<input type="text" name="name" required="" class="Grade_input__22PTE" placeholder="Name*" maxlength="10">
</div>
<div class="Grade_input_container__3ztZk css-vurnku">
<input type="email" required="" name="email" class="Grade_input__22PTE" placeholder="Email*">
</div>
<div class="Grade_input_container__3ztZk css-vurnku">
<input type="text" name="Address" required="" class="Grade_input__22PTE" placeholder="Address*">
</div>
<div class="Grade_input_container__3ztZk css-vurnku">
<input type="tel" name="phone" class="Grade_input__22PTE" placeholder="Phone">
</div>
<div class="Grade_input_container__3ztZk css-vurnku">
<input type="file" class="Grade_input__22PTE" name="5349366.jpg">
</div>
<div class="Grade_textarea__YR0na css-vurnku">
<textarea name="cards" required="" class="Grade_input__22PTE">
</textarea>
</div>
<div class="Grade_textarea__YR0na css-vurnku">
<textarea name="message" class="Grade_input__22PTE" placeholder="Message">
</textarea>
</div>
<br>
<input type="submit" value="Send" class="Grade_btn__1QKUn">
</form>

how can i delete my file from e.target ?

import React, { useRef, useState } from "react";
import { jsx, Box } from "theme-ui";
import style from "../../style/Grade.module.css";
import { db, storage } from "../components/config/config";
import emailjs from "emailjs-com";

export default function GradeCards() {
  const [file, setFile] = useState();
  const name = useRef("");
  const email = useRef("");
  const Addres = useRef("");
  const phone = useRef("");
  const cards = useRef("");
  const message = useRef("");
  const fileUpload = useRef("");

  const sendEmail = (e) => {
    e.preventDefault();
    
    //sending data to emailjs with e.target
    emailjs
      .sendForm(
        "service account",
        "template name",
        e.target, 
        "user_id"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  const sendDataToDb = (e) => {
    // sendEmail(e);
    e.preventDefault();
    e.persist(); // this is test when i use sendEmail() in .then()

    const formData = new FormData(e.target);

    const obj = {};
    for (let [key, value] of formData.entries()) {
      obj[key] = value;
    }

    if (file !== null) {
      storage
        .ref(`/files/${Date.now() + "-" + file.name}`)
        .put(file)
        .then(() => console.log("Succes"));
    }

    //this don't help in deleting data from e.target
    delete obj[file.name];

    db.collection("collectionName")
      .add(obj)
      .then(() => {
        fileUpload.current.value = "";
      })
      .then(() => {
        //test if the data is deleted her.But its still actief in e.target
        console.log(e.target);
        sendEmail(e);
      })
      .then(() => {
        name.current.value = "";
        email.current.value = "";
        Addres.current.value = "";
        phone.current.value = "";
        cards.current.value = "";
        message.current.value = "";
        console.log("done sending");
      });
  };

  return (
    <section>
      <Box className={style.container}>
        <Box className={style.form}>
          <Box className={style.contact_form}>
            <form
              onSubmit={(e) => sendDataToDb(e)}
              className={style.inputForm}
              autoComplete="off"
            >              
              <Box className={style.input_container}>
                <input
                  ref={name}
                  type="text"
                  name="name"
                  required
                  className={style.input}
                  placeholder="Name*"
                  maxLength="10"
                />
              </Box>
              <Box className={style.input_container}>
                <input
                  ref={email}
                  type="email"
                  required
                  name="email"
                  className={style.input}
                  placeholder="Email*"
                />
              </Box>
              <Box className={style.input_container}>
                <input
                  ref={Addres}
                  type="text"
                  name="Address"
                  required
                  className={style.input}
                  placeholder="Address*"
                />
              </Box>
              <Box className={style.input_container}>
                <input
                  ref={phone}
                  type="tel"
                  name="phone"
                  className={style.input}
                  placeholder="Phone"
                />
              </Box>
              <Box className={style.input_container}>                
                <input
                  ref={fileUpload}
                  type="file"
                  name={file?.name}
                  onChange={(e) => {
                    setFile(e.target.files[0]);
                  }}
                  className={style.input}
                />
              </Box>
              <Box className={(style.input_container, style.textarea)}>
                <textarea
                  ref={cards}
                  name="cards"
                  required
                  className={style.input}                 
                ></textarea>
              </Box>
              <Box className={(style.input_container, style.textarea)}>
                <textarea
                  ref={message}
                  name="message"
                  className={style.input}
                  placeholder="Message"
                ></textarea>
              </Box>
              <br />
              <input type="submit" value="Send" className={style.btn} />
            </form>
          </Box>
        </Box>
      </Box>
    </section>
  );
}