I'm trying to condition the rendering of different React function components, according to specific parameters.

For example, I want to render ComponentA if an input field includes only a number, or ComponentB otherwise. I use a switch case that returns the component that corresponds with the right case. *Important to mention that each of the components includes different hooks (different numbers of states e.g).*

When I run the program, I get an error that a different number of hooks is rendered.
**What is the right way to accomplish this?** Currently I'm using a class that extends the React `Component` class since it does not use Hooks, but I'm trying to find a solution that allows me to use them.