Data from QueryDict is not getting delivered

Question

Here is my component

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";

export function Daycard() {
    const [id, setId] = useState("");
    const navigate = useNavigate();
    const handleClick = () => {
        navigate(`/tasks-create?id=${id}`);
    };

    useEffect(() => {
        const id = uuidv4();
        setId(id);
    }, []);
    return (
        <div
            onClick={handleClick}
            className="col pb-5 bg-light border border-dark"
            style={{ height: "73.33px" }}
        ></div>
    );
}

as you can see I am passing an id by query dict, and then here is the component that receives it:

import { useForm } from "react-hook-form";
import { createTask } from "../api/task.api";
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useEffect, useState } from "react";

export function TaskFormPage() {
  const location = useLocation();
  const [id, setId] = useState("");
  useEffect(() => {
    const newid = new URLSearchParams(location.search).get("id");
    setId(newid);
  }, [location.search]);
  const { register, handleSubmit } = useForm();

  const navigate = useNavigate();

  const onSubmit = handleSubmit(async formdata => {
    const data = {
      id,
      ...formdata,
    };
    await createTask(data);
    navigate("/tasks");
  });

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="title"
          {...register("title", { required: true })}
          name="title"
        />
        <textarea
          rows="3"
          placeholder="description"
          {...register("description", { required: true })}
          name="description"
        ></textarea>
        <input
          type="datetime-local"
          placeholder="date"
          {...register("date", { required: true })}
        />
        <button>Create Task</button>
      </form>
    </div>
  );
}

However, looking in my API:

when I create a task the id is not in the uuid form :sample=("43cc4d96-2828-4ca4-aece-3a7099cbec99")

createTask is just a POST request to the API, why is the id not getting delivered?