React. js материал-значение поля выбора не обновляется

Question

Я использую TextField с пользовательским интерфейсом в качестве раскрывающегося списка с динамически создаваемым списком. Я использую его в двух разных сценариях ios.

• Один работает - возвращает одно значение в массив.
• Один не работает - возвращает объекты с двумя значениями {value, ID} в массив.

Пример Codesandbox здесь: https://codesandbox.io/s/material-demo-wssrp

Данные в обоих возвращаются правильно, так что это не проблема. Проблема в том, что выбранное значение в раскрывающемся списке не обновляется в том, которое возвращает объект.

Вот то, которое не работает:

const [boards, setBoards] = useState([]);

let getBoards = () => {
  const client = new GraphQLClient(url, {
    headers: {
      Authorization: access_token,
    },
  })

const query = `{
    boards() {
        id
        name
        owner {
            id
            name
        }
    }
}`

client.request(query)
  .then(data => {
    setBoards(data.boards.map(board => {
      ////////// RETURN OBJECT WITH 2 VALUES TO THE boards array ///////////
      return {
        id: board.id,
        name: board.name
      }
    }));
  })
}

const handleBoardChange = (e) => {
  setProfile({ type: 'UPDATE_MONDAY_BOARD_NAME', value: e.target.value.name });
}

return (
  <TextField
    select
    value={profile.mondayBoardName}  ////// THIS ISN'T UPDATING /////
    onClick={getBoards}
    onChange={e => handleBoardChange(e)}
  >
    {boards.map((board, index) =>
      <MenuItem
        key={index}
        value={{ name: board.name, id: board.id }}  //// USE BOTH VALUES
      >
        {board.name}
      </MenuItem>
    )}
  </TextField>
); 

Вот тот, который работает:

const [sheets, setSheets] = useState([]);

let getSheets = () => {
  fetch(endpoint).then(response => response.json()).then(data => {

      ////////// RETURN OBJECT WITH 1 VALUE TO THE sheets array ///////////
      setSheets(data.sheets.map(sheet => sheet.properties.title));
  });
}

const handleSheetChange = (e) => {
  setProfile({type:'UPDATE_GS_SHEET_NAME',value: e.target.value});
}

return (
  <TextField
    className={props.classes.textField}
    value={profile.gsheetName}    ////// THIS IS UPDATING /////
    onClick={getSheets}
    onChange={e => handleSheetChange(e)}
  >
    {sheets.map((value, index) =>
      <MenuItem 
        key={index} 
        value={value}  // USE SINGLE VALUE
      >
          {value}
      </MenuItem>
    )}
  </TextField>

);