React Native + Typescript: how to dinamically render a Component [duplicate]

I've been struggling for 3 hours with this problem.

  const steps = [    {      Component: ChooseGameMode,      props: {        initialValue: gameMode,        onComplete: handleChooseGameModeComplete      }    },    {      Component: ChooseGameType,      props: {        initialValue: gameType,        onComplete: handleChooseGameTypeComplete      }    },    {      Component: ChooseGameSeverity,      props: {        initialValue: gameSeverity,        onComplete: handleChooseGameSeverityComplete      }    },    {      Component: ChooseGamePlayers,      props: {        previousPlayers: previousPlayers,        initialValue: gamePlayers,        onComplete: handleChooseGamePlayersComplete      }    }  ];  const {Component: CurrentComponent, props: currentComponentProps} =    steps[currentSetupStepIndex];

Given the following code I'd need to render the component CurrentComponent with the relative properties currentComponentProps but I can't figure out the right way because typescript is slapping (deserved) me in the face.

I've would have done something like <CurrentComponent {...currentComponentProps} /> but it is obviously too easy to be true.

Thank you for the help.

UPDATE

Here's my current solution, but I'm not convinced enough.

  //////////  // Render  return (<ScrollView>      {React.createElement(        CurrentComponent as React.ComponentType<typeof currentComponentProps>,        currentComponentProps      )}</ScrollView>  );

The compiler is seeing this:

const currentComponentProps: {    initialValue: GameMode | null;    onComplete: (mode: GameMode) => void;    previousPlayers?: undefined;} | {    initialValue: GameType | null;    onComplete: (type: GameType) => void;    previousPlayers?: undefined;} | {    ...;} | {    ...;}

If someone has a better one it would be really appreciated for educational purpose, not for my case.

Thank you everyone!