Используйте стрелки для навигации по элементу из текстовых полей

Question

Я хочу иметь возможность использовать клавиши (стрелка вниз и стрелка вверх) для навигации по списку, который появляется при наборе текста в текстовом поле.

Я получил список с именами:

list: [
    { text: "Benny", id: 0 },
    { text: "Ben", id: 1 },
    { text: "Brianna", id: 2 }
  ]

Я отображаю список следующим образом:

var list = this.state.list.map((item, g) => {
  return (
    <ListItem key={item.id}>
      <Typography color="primary" variant="subtitle1">
        {item.text}
      </Typography>
    </ListItem>
  );
});

В функции возврата для компонента я получил текстовое поле внутри блока и ListMenu внутри другого блока. Поле с ListMenu содержит элементы ListItems, отображаемые при рендеринге. Я хочу иметь возможность просто использовать клавиши для навигации по списку.

https://codesandbox.io/s/use-arrows-to-navigate-jw9uj?fontsize=14&hidenavigation=1&theme=dark