Mengedit konten baris tabel tertentu di React

Saya telah membuat tabel ini dan menambahkan tombol yang memungkinkan untuk mengedit dan menghapus baris tertentu. Saya telah menerapkan fungsi untuk penghapusan tetapi tidak tahu harus mulai dari mana untuk mengedit baris tertentu.

Berikut adalah tabel

Saya memahami bahwa ketika saya menekan tombol edit harus ada komponen yang melacak benar atau salah.. benar menampilkan tampilan edit (input teks menggantikan konten teks di atas meja) dan false hanya menampilkan konten teks di tabel . Namun lebih jauh dari itu, saya tidak yakin bagaimana caranya agar kotak teks hanya ditampilkan hanya untuk baris tertentu yang pengguna tekan edit.

Ini kode negara bagian saya:

state = {
shoes : [
{
  name:”hello”
  list: [
  {
  {brand: 'klsdnalkd', type: 'da,sbd,ads', company: 'daskjbdas', binding: 'dasjdbas', style: 'dasdjkb', quantity: 1, id: 1},
  { brand: 'dyasidu82', type: 'dasdkasnd', company: 'dasndbamnsbda', quantity: 1, id: 2},
  { brand: 'dalsknda', type: 'dasljndas', company: 'dsaknal', quantity: 5, id: 3}
}]
]
}

Saya memahami bahwa saya harus menggunakan id unik setiap array untuk mereferensikan tombol edit tetapi bagaimana cara saya melakukan ini dengan kode yang sudah saya miliki untuk merender tabel?

Berikut adalah kode komponen untuk merender tabel (Harap abaikan beberapa fungsi yang diteruskan di sana. Saya baru saja mencoba banyak hal untuk mencoba dan mengimplementasikan ini):

const TableRender = ({shoes, deleteShoeEvent, editingRowToggle, editRowToggle, showRowEditMode, showRowNormalMode}) => {
const [show, setShow] = useState(false);
const shoesList = shoes.map(shoe => {
    return(
        <tbody class="tbody">
            <tr class="tr" /*onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show)}*/ key={shoe.id} {...!editingRowToggle ? showRowNormalMode: showRowEditMode}>
                <td class="td"> 
                    {shoe.brand}
                    <td>
                        <Button className="edit-delete-buttons" variant="tertiary" handleClick={editRowToggle} size="xs" >Edit</Button>
                        <Button className="edit-delete-buttons" variant="tertiary" size="xs" handleClick={() => {deleteShoeEvent(shoe.id)}}>Delete</Button>
                    </td>
                </td>
                <td class="td">
                    <div>{shoe.type}</div>
                    <div>{shoe.company}</div>
                    <div>{shoe.author ? shoe.author : null}</div>
                    <div>{shoe.binding ? shoe.binding : null}</div>
                    <div>{shoe.style ? shoe.style : null}</div>
                </td>
                <td class="td">
                    {shoe.quantity}
                </td>
            </tr>
        </tbody>
    )
})
return(
    <Fragment>
        {shoesList}
    </Fragment>
)
}

Bantuan apa pun akan sangat membantu