Estoy tratando de personalizar una de las columnas para tener celdas desplegables que puedan mostrar el estado y poder cambiarlo, la misma implementación del estado del problema de acumulación de Jira.
la idea es tomar el valor desplegable y enviarlo a mi base de datos a través de graphql.

¿Alguien puede aconsejarme con las mejores prácticas para hacerlo?

abajo esta mi codigo

 const [reqStatus, setreqStatus] = useState(false); const result = orgData.map((a) => a.id); console.log(result); const handleTranslationstatus = (e) => { e.preventDefault(); UpdateTransStatus({ stats: reqStatus, id: result }) .then((res) => { console.log(res); }) .catch((e) => { alert(`Something went wrong, ${e.message}`); }); }; const options = [ { label: 'Progress', value: false }, { label: 'Done', value: true }, ]; <table className={style.table} id="myTable"> <thead className={style.header}> <tr> <th>orgName</th> <th>VideoCardID</th> <th>Requested Date</th> <th>VideoLink</th> <th>Request Status</th> <th>save changes</th> </tr> </thead> <tbody> {orgData.map((organization) => { return ( <tr key={organization.id}> <td>{organization.orgName}</td> <td>{organization.videocardId}</td> <td>{organization.requestDate}</td> <td> <a target="_blank" href={`${organization.videoLink}`} rel="noreferrer"> Link </a> </td> <td> <Select multi value={reqStatus} onChange={(e) => setreqStatus(e.target.value)} options={options} /> </td> <td> <button type="submit" className="btn action-btn" onClick={handleTranslationstatus} > Save </button> </td> </tr> ); })} </tbody> </table>