Javascript 物料表：单击reactjs物料表时，自定义添加按钮会出现错误

我在我的项目中使用的是material table，在一个场景中，默认情况下，所有行复选框都被选中为true，用户可以取消选择，如果他愿意，然后移动到stepper中的下一步。。我还可以在当前步骤中添加新行按钮。但当我选中一个复选框，然后单击add，它就会抛出一个错误。谁能解释一下原因吗。发生了什么事

我附上代码沙盒代码：

({
核对：正确
}),
节目名称：假，
工具栏：false，
行样式：{
字体大小：12
},
头型：{
背景色：“F5F7FE”，
颜色：“8C98A9”，
字体大小：“12px”
},
分页：false
}}
组成部分={{
动作：（道具）=>{
//如果不是添加操作
如果(
typeof props.action==typeof Function||
props.action.tooltip！=“添加”
) {
返回；
}否则{
返回；
}
}
}}
行动={[
{
图标：“保存”，
工具提示：“保存用户”，
onClick：（event，rowData）=>alert（“您已保存”+rowData.name）
}
]}
可编辑={{
onRowAdd：（newData）=>
解析（setTableData（[…tableData，newData]））
}}
/>
addActionRef.current.click（）}>添加新

看起来ref附加到的div没有（总是）被渲染。如果未呈现，则

addActionRef.current

将未定义，您将得到该错误。在尝试访问ref的值之前，需要确保呈现了带有

ref={addActionRef}

的元素。如何执行该操作>？

<MaterialTable
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        title="Custom Add Mode"
        options={{
          search: false,
          selection: true,
          selectionProps: (rowData) => ({
            checked: true
          }),
          showTitle: false,
          toolbar: false,
          rowStyle: {
            fontSize: 12
          },

          headerStyle: {
            backgroundColor: "#F5F7FE",
            color: "#8C98A9",
            fontSize: "12px"
          },
          paging: false
        }}
        components={{
          Action: (props) => {
            //If isn't the add action
            if (
              typeof props.action === typeof Function ||
              props.action.tooltip !== "Add"
            ) {
              return <MTableAction {...props} />;
            } else {
              return <div ref={addActionRef} onClick={props.action.onClick} />;
            }
          }
        }}
        actions={[
          {
            icon: "save",
            tooltip: "Save User",
            onClick: (event, rowData) => alert("You saved " + rowData.name)
          }
        ]}
        editable={{
          onRowAdd: (newData) =>
            Promise.resolve(setTableData([...tableData, newData]))
        }}
      />
      <div>
        <button onClick={() => addActionRef.current.click()}>Add New</button>
      </div>
    </>