在“材料表”详细信息面板行之间切换时，表单值未更改

Question

我有一个带有详细信息面板的物料表。这意味着您可以单击一行数据，然后展开并显示您要渲染的数据。在此渲染函数中，我抛出了带有表单元素的表单。验证通过react hook表单进行。

当我通过详细信息面板之一提交表单时，它会打印对象的ID。但是，当我在其他面板上执行此操作时，它仍会打印与第一个ID相同的ID。

因此，表单提交不会更新，它会转发我单击的第一行中的表单，并且不会更改。

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