Редактирование определенного содержимого строки таблицы в React

Я сделал эту таблицу и добавил кнопки, которые позволят редактировать и удалять определенные строки. Я уже реализовал функцию удаления, но не знаю, с чего начать редактирование определенных строк.

Вот таблица

Я понимаю, что когда я нажимаю кнопку редактирования, должен быть компонент, который отслеживает true или false.. true, показывающий представление редактирования (текстовый ввод вместо того, где текстовое содержимое находится в таблице), и false, просто показывающее текстовое содержимое в таблицах. . Но кроме того, я не уверен, как заставить отображать только текстовые поля только для определенной строки, которую пользователь нажимает на редактирование.

Вот мой код состояния:

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}
}]
]
}

Я понимаю, что мне нужно каким-то образом использовать уникальный идентификатор каждого массива, чтобы ссылаться на кнопку редактирования, но как мне это сделать с кодом, который у меня уже есть для рендеринга таблицы?

Вот код компонента для рендеринга таблицы (пожалуйста, не обращайте внимания на некоторые из переданных функций, я просто пробовал кучу вещей, чтобы попытаться реализовать это):

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>
)
}

Любая помощь будет отличной