Значения формы не изменяются при переключении между строками панели сведений таблицы материалов

Question

У меня есть таблица материалов с панелью деталей. Это означает, что есть ряд данных, по которым вы можете щелкнуть, который расширяется и показывает то, что вы говорите для визуализации. В этой функции рендеринга я добавил форму с элементами формы. Проверка происходит с помощью форм реагирования.

Когда я отправляю форму через одну из панелей сведений, она печатает идентификатор объекта. Но когда я делаю это на другой панели, она все равно печатает тот же идентификатор первой.

Таким образом, отправка формы никогда не обновляется, и она пересылает форму из первой строки, которую я нажал, и никогда не изменяется.

 const { register, handleSubmit, errors } = useForm({
        validationSchema
    });

   const openConfirmChanges = (formData: any) => {

        console.log(formData.id)



    }

<MaterialTable
                columns={cols}
                data={data}
                icons={tableIcons}
                title="Products in Loan"
                options={{
                    headerStyle: {
                        backgroundColor: theme.palette.primary.main,
                        color: "#fff"
                    },
                    pageSize: 10,
                    actionsColumnIndex: -1
                }}
                onRowClick={(event, rowData, togglePanel) => togglePanel()}
                detailPanel={[
                    {
                        render: rowData => {

                            return(
                                <div>
                                    <Grid container direction="column">

                                    <form onSubmit={handleSubmit(openConfirmChanges)}>
                                      // TONS OF FORM ELEMENTS
                                   </form>
                            )
                        }
                    }
                ]}    />