material-ui v4.11.1 - Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Question

So we implemented the Modal from material.ui and we're trying to mount different components inside the modal based on what is passed in as props. Upon doing this we received the error message "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?".

We've tried to understand how to use React.forwardRef() - we've read this thread for example (How can I use forwardRef() in React?) - but couldn't really make sense of how to implement it in our code specifically.

Would really appreciate some help with how we can implement React.forwardRef() to remove the error.

Here's our code (Modal)

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

Here's where we mount the Modal

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

Here's the EditTask component

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