title: Defining schema for dynamic rendering of dependent dropdowns/input fields
body: <p>This is different from other similar questions where only options of the second dropdown will be decided based on the value selected from the first dropdown. Here what is the next dropdown/dropdowns or another input type to render depends on what is the value selected in the first dropdown.</p>
  <p>For example, in the first drop-down, if he selects a name, next we have to render an input box, if he selects age in the first drop-down, next we have to render dropdown with values of ages, if he selects pet in first, dogs should render next, then breed should render following that.</p>
  <p>So, We want to define a generic schema as a single source of truth in Typescript, capturing the information of the hierarchy of input fields to render. We should also be able to reuse/plug part of the already defined hierarchy to another node as well.</p>
  <p>What would be the best approach for this to do in typescript with React?</p>