In React; is it possible to pass down a component name to create a flexible page switch component?

thanks for checking out my question. I’m wondering if what I am trying to do is possible, and why it doesn’t work the way I am trying.
I have a toggle switch that allows you to change between pages simply. I’m wondering if I can make this toggle recyclable by being able to pass the component names down. Please see my attempt below.

Parent Component calling the Switch page toggler:

import React from "react";
import SwitchPages from "../component/SwitchPages/SwitchPages";
import StickyNoteComponent from "../component/StickyNote/StickyNoteComponent";

const HomePage = () => {
  return (
    <div className="page">
      <SwitchPages
        page1={"WeatherDisplayComponent"}
        page2={"JokeComponent"}
        text1={"Weather"}
        text2={"Jokes"}
      />
      <StickyNoteComponent />
    </div>
  );
};

export default HomePage;

The SwitchPage component that contains the toggle:

import React, { useState } from "react";
import Switch from "react-switch";
import JokeComponent from "../DailyJoke/JokeComponent";
import WeatherDisplayComponent from "../WeatherDisplay/WeatherDisplayComponent";
const SwitchPages=({page1,page2,text1,text2}) =>{
  const [checked, setChecked] = useState(false);

  return (
    <div className="component">
      <div className="switch">
        <h1>{text1}</h1>
        <Switch
          offColor="#9BCA31"
          onColor="#E3E545"
          uncheckedIcon={false}
          checkedIcon={false}
          className="switch-toggle"
          checked={checked}
          onChange={() => {
            setChecked(!checked);
          }}
        />
        <h1>{text2}</h1>
      </div>
      {checked === false ? <{page1} /> : <{page2} />}
    </div>
  );
}

export default SwitchPages;