Отображение условной информации на основе ввода пользователя в React Hook Form

Question

У меня есть форма React, и я бы хотел, чтобы пользователь мог контролировать содержимое div на основе параметров, выбранных в форме. Я хотел бы, чтобы это происходило на канале.

Например: если пользователь вводит «Пудинг» в поле выбора, div отобразит список пудингов, например, мороженое, пирожное, яблочная крошка. Если пользователь вводит «Main», div отображает список основных блюд, например, стейк, курица, ветчина.

Концепция кажется довольно простой, но я новичок в React, и дополнительный уровень сложности заключается в том, что я использую React Hook Form и мне нужно использовать Controller , потому что я буду использовать условную логику c, чтобы показать и скрыть поля формы. Сказав это, я не уверен, что это актуально?!

Структура приложения

  ----index.js---- 
   V             V
Form.js     MenuItems.js
   V
FormSelect.js

FormSelect. js

import React from 'react';
import { Select, MenuItem } from '@material-ui/core';
import { Controller } from 'react-hook-form';
function FormSelect({ values, name, question, register, control }) {
  const selectOptions = values;
  return (
    <div className="form-group">
      <label htmlFor={name}>What part of the menu do you want to see?</label>
      <Controller
        as={
          <Select>
               <MenuItem value="puddings">Puddings</MenuItem>
               <MenuItem value="mains">Mains</MenuItem>
          </Select>
        }
        control={control}
        name={name}
        register={register}
        className="form-control"
        id={name}
        defaultValue=""
      />
    </div>
  );
}
export default FormSelect;

MenuItems. js

import React from 'react;
const MenuItems = probs =>{
    return <div>This is where I want to show the list of foods!</div>;
};
export default MenuItems;

Кто-нибудь может посоветовать, что мне нужно сделать с моим кодом, чтобы эта работа работала?

Большое спасибо,

Kat ie