How to pass the job.id from a loop to the payload for storing new comments on the comment table when a user comments on a specific job?

I have been attempting to solve a problem where I need to pass the item.id value from a loop to the payload in order to store new comments on the comment table when a user comments on a specific job. Despite trying various solutions, I have been unable to make progress

<div class="posts-section">
<div class="post-bar">
<div class="post_topbar">
<div class="usy-dt">
<img src={asset('small', item.users.profil_picture)} alt="" />
<div class="usy-name">
<h3 key={index}>{item.users.name}</h3>
<span>
<img src="images/clock.png" alt="" />
{time(item.created_at)}
{/* { time(item.created_at)} */}
{/* {timePassed} */}
</span>
</div>
</div>
<Form onSubmit={handleSubmit} type="submit">
<InputGroup className="mb-3 comment-sect">
<InputGroup.Text id="inputGroup-sizing-default">
<Image src={asset('small', currentUser.profil_picture)} rounded className="profil-comment" />
</InputGroup.Text>
<Form.Control
as="textarea"
rows={1}
onChange={handleTextareaChange}
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
// className={textareaValue.trim() !== '' ? 'filled' : ''}
/>
<div
className={`comment-send-container ${textareaValue.trim() !== '' ? 'active-icon' : 'disable-icon'}`}
onClick={handleSubmit}
value={textareaValue}
>
<FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
</div>
</InputGroup>
</Form>
const handleSubmit = e => {
e.preventDefault()
const payload = {
comment: textareaValue,
user: currentUser.id,
}
console.log(payload)
}

<Form onSubmit={{(e) => handleSubmit(e,item)}} type="submit">

This item you can get in your function

  const handleSubmit=(e,item)=>{
e.preventDefault();
const payload={
// jobId : item.id **Add your key**
comment:textareaValue,
user:currentUser.id,
}
console.log(payload);
}
</details>