I want to pass multiple arguments to a function in React js.

I try making it like this:

 const uwu = async(e, id) => {         // <-- Here is the multiple arguments the e and id.
    e.preventDefault()
    
    try {
      const docRef = collection(db, "proyects", id, "tasks");
    
    await addDoc(docRef, {
      taskName: taskName,
      uid: currentUser,
      projectId: id
    })
    console.log("QUE PEDO?")
    } catch (error) {
      console.log(error)
    }
    
    
  }

But then the console throws me this error:

I am calling the "uwu" function, with a onSubmit on a form inside a map() that renders the data that i have in firebase. Like this:

{
        loading ?
        data.map(doc => (
          <div key={doc.id}>
              <h2 key={doc.id}>{doc.id}</h2>
              <form onSubmit={() => uwu(doc.id)}>  // <------
                <input
                placeholder="añadir tareuvich"
                onChange={e => setTaskName(e.target.value)}
                />
                <button>Crear</button>
              </form>
              {
                tasksData.map(task => (
                  
                  <div key={task.id}>
                    { task.projectId == doc.projectId && <h5>{task.taskName}</h5>}
                  </div>
                   
                  
                ))
              }
          </div>
        )) : 'Loading...'
      }

Aparrently the e.preventDefault() is not working as usual, but then if i remove the e.preventDefault and also the (e) from the arguments and just leave the "id" it works... any solution?