Как предварительно выбрать строку в сетке данных MUI?

Question

Я пытаюсь предварительно выбрать строку в сетке данных MUI и не знаю, как это реализовать. я вношуpreselectedContactNameв качестве реквизита, который используется для фильтрацииcontactsмассив и найдите точноеcontact object. Затем, найдя правильный, я сохраняю его в состоянииpreSelectedContact.

      export const AccountContactsContent = (props) => {
  const { contacts = [], preselectedContactName } = props
  const [preselectedContact, setPreselectedContact] = useState('')
  const [preselectedRow, setPreselectedRow] = useState([])

  useEffect(() => {
    const contactToBeSelected = contacts.filter(
      (contact) => contact.name === preselectedContactName
    )
    setPreselectedContact(contactToBeSelected)
  }, [preselectedContactName])

Здесь я запутался в том, как использовать и что я только что добавил вDataGrid. Я хочу, чтобы при загрузке страницы, в зависимости от щелчка по имени контакта, она предварительно выбирала строку, содержащую контакт, но после этого все равно могла нажимать на другие строки. я создалpreselectedRowв качестве другого состояния, чтобы попытаться сохранить строку, по которой щелкают, но я где-то лажаюselectionModelиonSelectionModelChange

       <DataGrid
    autoHeight={true}
    className={styles.dataGrid}
    columns={columns}
    getRowClassName={({ row }) => (row.isDeleted ? styles.inactive : '')}
    getRowHeight={() => 'auto'}
    hideFooterSelectedRowCount
    initialState={{
      pagination: { pageSize: 10 },
    }}
    keepNonExistentRowsSelected
    onRowClick={({ row }) => selectContact(row)}
    onSelectionModelChange={(preselectedContact) => {
      setPreselectedRow(preselectedContact)
    }}
    pageSize={10}
    rowCount={contacts.length}
    rowHeight={100}
    rows={contacts}
    rowsPerPageOptions={[5, 10, 25, 50, 100]}
    selectionModel={preselectedRow}
  />