react conditional rendering with design pattern

My question is, what would be the best way to set up the conditional rendering in this code to keep the code scalable and maintainable? i mean in a render function. i would like in future when i add new component,i do not want to touch the old code to add the new component. any ideas? i already know about

{this.state.state1?Component/>:null}

import * as React from "react";
import LoginForm from "./forms/LoginForm";
import MenuForm from "./forms/MenuForm";
import HomeForm from "./forms/HomeForm";
import TermsForm from "./forms/TermsForm";
import IdentificationResultForm from "./forms/IdentificationResultForm";
import CompanyForm from "./forms/CompanyForm";
import handleAppDateInputFromClient from "../api/azureController.js";
import ListViewForm from "./forms/ListViewForm";
import PartDetails from "./forms/PartDetails";
import ThemeForm from "./forms/ThemeForm";

export default class TemplateController extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flowComponentNumber: 0,
    };
    this.config = {};
    this.translation = {};
  }

  handelSubmit = (companyName) => {
    // call azure controller with companyName and config
    handleAppDateInputFromClient(companyName, this.config);
    console.log(companyName, this.config);
    this.handleFlowComponent();
  };

  handleLanguage = (key, value) => {
    this.translation[key] = value;
  };

  handleChildSubmit = (key, value) => {
    this.config[key] = value;
    console.log(this.config);
    this.handleFlowComponent();
  };

  handleFlowComponent = () => {
    this.setState((prevState) => ({
      flowComponentNumber: prevState.flowComponentNumber + 1,
    }));
  };

  render() {
    let component;
    // let next = <Button variant="primary" type="button" onClick={this.handleFlowComponent}></Button>

    if (this.state.flowComponentNumber === 0) {
      component = <LoginForm now={10} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 1) {
      component = <HomeForm now={20} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 2) {
      component = <TermsForm now={30} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 3) {
      component = <IdentificationResultForm now={40} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 4) {
      component = <MenuForm now={50} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 5) {
      component = (
        <ListViewForm
          now={60}
          handler={this.handleChildSubmit}
          languageHandler={this.handleLanguage}
        />
      );
    } else if (this.state.flowComponentNumber == 6) {
      component = (
        <PartDetails
          now={70}
          handler={this.handleChildSubmit}
          languageHandler={this.handleLanguage}
        />
      );
    } else if (this.state.flowComponentNumber === 7) {
      component = <ThemeForm now={80} handler={this.handleChildSubmit} />;
    } else if (this.state.flowComponentNumber === 8) {
      component = <CompanyForm now={90} handler={this.handelSubmit} />;
    } else if (this.state.flowComponentNumber === 9) {
      component = <h1 style=> Your submit is successful </h1>;
    }

    return <>{component}</>;
  }
}