react conditional rendering with design pattern - reactjs

Question

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={{ color: "greenyellow" }}> Your submit is successful </h1>;
}
return <>{component}</>;
}
}