Adicionar campos de texto dinâmicos por meio da seleção suspensa de componentes?

No projeto a seguir, estou criando um Painel de Tarefas usando TypeScript e React no Microsoft Excel. Quando o painel de tarefas for carregado, ele terá apenas um menu suspenso básico com algumas opções.

import * as React from "react";
import Progress from "./Progress";
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
//import TopLevel from "./Operations/TopLevel";
//import MakeItem from "./Operations/MakeItem";
//import RawMaterial from "./Operations/RawMaterial";
//import BuyItem from "./Operations/BuyItem";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

export interface AppState {

}

export default class App extends React.Component<AppProps, AppState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
    };
  }

  componentDidMount() {
    this.setState({

    });
  }

  render() {
    const { title, isOfficeInitialized } = this.props;
    const dropdownStyles: Partial<IDropdownStyles> = {
      dropdown: { width: 300 }
    };
    const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
      { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
      { key: 'Purchased', text: 'Purchases', itemType: DropdownMenuItemType.Header },
      { key: 'rawMaterial', text: 'RAW MATERIAL' },
      { key: 'buyItem', text: 'BUY ITEM' },
    ];
    ;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
      );
    }

    return (
      <div className="ms-welcome">
            <Dropdown
              label="Operation"
              key="dropDownKey"
              options={options}
              styles={dropdownStyles}
            />
      </div>
    );
  }
}

Após a resposta de Klas, mudei um pouco meu código, mas estou tendo problemas porque não há erros gerados. Eu tenho meu App.tsx, meu TopLevel.tsx e o novo arquivo que criei por causa do Klas chamado Dropdown.tsx. Por enquanto vou esquecer "Make", estou apenas tentando entender a lógica. O que estou fazendo de errado aqui?

App.tsx

import * as React from "react";
import Dropdown from "./Operations/Dropdown";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}
export interface AppState {

}

function App() {
  return <Dropdown />;
}

export default App;

Dropdown.tsx

import * as React from "react";
import TopLevel from './TopLevel';
import { useState } from 'react';
const Dropdown = (): React.ReactElement => {
    const [value, setValue] = useState("none");
    let Form: any;
    switch (value) {
      case "TopLevel":
        Form = <TopLevel title="title" logo="logo" message="message" />;
        break;

      case "Make":
        Form = <div />;
        break;

      default:
        Form = <div />;
        break;
    }
    return (
      <div>
        <select
          id="lang"
          onChange={event => event?.target?.value && setValue(event.target.value)}
          value={value}
        >
          <option value="select">Select</option>
          <option value="TopLevel">TopLevel</option>
          <option value="Make">Make</option>
        </select>
        {Form}
      </div>
    );
  };
  export default Dropdown;

TopLevel.tsx

import * as React from "react";

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}
export default class TopLevel extends React.Component<TopLevelProps> {
  render() {
    return (
      <div>
        <div>TopLevel</div>
        <input placeholder="Part Number" />
      </div>
    );
  }
}

Aqui está o erro que estou recebendo.