reactjs - material-ui v4.11.1 - 関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。React.forwardRef() を使用するつもりでしたか?

Question

そのため、Material.ui から Modal を実装し、小道具として渡されたものに基づいて、モーダル内にさまざまなコンポーネントをマウントしようとしています。これを行うと、「関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。React.forwardRef() を使用するつもりでしたか?」というエラー メッセージを受け取りました。

React.forwardRef() の使用方法を理解しようとしました - たとえば、このスレッドを読みました(React で forwardRef() を使用するにはどうすればよいですか? ) - しかし、実際にそれを実装する方法を理解できませんでした具体的にコードします。

React.forwardRef() を実装してエラーを取り除く方法について、助けていただければ幸いです。

これが私たちのコードです（モーダル）

const useStyles = makeStyles(() => ({
  backdropModal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}))

const ModalContainer = ({ component, editMode, setEditMode }) => {
  const classes = useStyles()

  return (
    <Modal
      open={editMode}
      onBackdropClick={() => setEditMode(false)}
      className={classes.backdropModal}
    >
      {component}
    </Modal>
  )
}

ここにモーダルをマウントします

      <ModalContainer 
        editMode={editMode}
        setEditMode={setEditMode}
        component={
          <EditTask
            item={item} 
            setEditMode={setEditMode}
          />
        }
      />

これが EditTask コンポーネントです

    <EditTaskForm>
      <SubContainer>
        <InputField 
          id="input-task-title"
          label="Task title"
          type="text" 
          value={taskTitle} 
          handleChange={setTaskTitle} 
        />
        <InputField 
          id="input-task-description"
          label="Description"
          type="text" 
          multiline={true}
          value={taskDesc} 
          handleChange={setTaskDesc} 
        />
        <InputField 
          id="input-task-comments"
          label="Comments"
          type="text" 
          multiline={true}
          value={taskComments} 
          handleChange={setTaskComments} 
        />
      </SubContainer>
      <ButtonsContainer>
        <SaveButton 
          type="button"
          onClick={handleFormSubmit}
        >
          SAVE
        </SaveButton>
        <CancelButton onClick={() => setEditMode(false)}>CANCEL</CancelButton>
      </ButtonsContainer>
    </EditTaskForm>