e.target.value JavaScript not working accurate on onClick element when is clicked couple times

I have td in react that has on click event function , the function sends id of td to the backend node.js
and the backend will delete that from database
here is my problem
sometimes e.target.id gets empty enter image description here but the element has id enter image description here
when I look in Chrome debugger,
why is this happing ?? but sometimes its works fine enter image description here
the id is from another Axios.get and mapped in react

<td
  className="deletebutton"
  id={list.id}
  onClick={async (e) => {
    const deleteid = await e.target.id;
    const socket = io(`http://${process.env.REACT_APP_RUN}:3001`, {
      transports: ["websocket", "polling", "flashsocket"]
    });

    await axios.post(
      `http://${process.env.REACT_APP_RUN}:3001/api/delete/single`,
      {
        idDelete: "" + deleteid + ""
      }
    );
    await socket.emit("get date", ip);
  }}
>
  delete
  <i>
    <IconContext.Provider value={{ size: "16px", className: "factor-icons" }}>
      <div>
        <AiFillDelete />
      </div>
    </IconContext.Provider>
  </i>
</td>;

I tried promises but it has the same problem

Do you really need to get the id from the e.target.id?

That's not a recommended way of doing things in Reactjs.
The id could be used from the way you have it in the list.id if they are the same.

So you code should look like this instead

...
id={list.id}
onClick={async (e) => {
  const deleteid = list.id;
  ...
}}
...

hi thank you @SimoneRossaini
it is work with e.currentTarget.id in this case

but what is diffrence between e.target.id and e.currentTarget.id in this case
and how sometimes e.target.id works good and sometimes not