e.preventDefault is not a function (React)

I am using React to make a form that will make a POST to MongoDB, what happens is that when I start trying to fill the form I get the following error:

e.preventDefault is not a function

TypeError: e.preventDefault is not a function
at handleChange

this is the code (in a summarized form), this is handleChange and handleSubmit:

 const handleChange = (e) => {
    e.preventDefault();
    setProject({ ...project, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch("http://localhost:5001/client/projects", {
      method: "POST",
      body: JSON.stringify(project),
      headers: { "Content-Type": "application/json" },
    });

    const data = await res.json(project);
    console.log(data);
    console.log(project);
  };

and here is a small part of the form:

 <form onSubmit={handleSubmit}>
              <Box width="50%">
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <DatePicker
                    id="project_start"
                    name="project_start"
                    value={project.project_start}
                    onChange={handleChange}
                    slotProps={{
                      textField: {
                        size: "small",
                        margin: "dense",
                      },
                    }}
                  />
                  <DatePicker
                    id="project_end"
                    name="project_end"
                    value={project.project_end}
                    onChange={handleChange}
                    renderValue={(selected) => {
                      return [{ selected }];
                    }}
                    slotProps={{
                      textField: { size: "small", margin: "dense" },
                    }}
                  />
                </LocalizationProvider>
                <TextField id="nombreP" margin="dense" size="small" />
                <FormControl size="small" sx={{ m: 1 }}>
                  <Select
                    id="encargadoP"
                    multiple
                    name="usersId"
                    value={project.usersId}
                    onChange={handleChange}
                    MenuProps={MenuProps}
                    renderValue={(selected) => (
                      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                        {selected.map((value) => (
                          <Chip key={value} label={value} />
                        ))}
                      </Box>
                    )}
                    sx={{ width: 205 }}
                  >
                    {data?.map(({ _id, name }) => (
                      <MenuItem key={_id} value={name}>
                        {name}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Box>
            </Box>
            <Button
              type="submit"
              variant={"outlined"}
              size={"large"}
              sx={{
                width: 420,
                border: "1px solid white",
                m: "3rem 0 0 0",
                color: "white",
                borderRadius: "30px",
              }}
            >
              Agregar proyecto
            </Button>
          </Box>
        </form>

I am very grateful to everyone who can help me

The onChange callback for MUI's DatePicker is called with the new value as the first argument, not the event object.

Thus your code should be changed to something like this:

const handleChange = (name, newVal) => {
    setProject({ ...project, [name]: newVal });
};

<DatePicker id="project_start" name="project_start" value={project.project_start}
      onChange={handleChange.bind(null, 'project_start')}/>
{ /* and so on for the other DatePickers ... */ }