How to pass components as reference in props using react

Question

I have a react typescript app.

I have 2 components Calender and CustomDayDisplay.

I'm calling the Calender component in the App Component like this:

import "./styles.css";
import Calendar from "./components/calendar/Calendar";
import CustomDayDisplay from "./components/customDayDisplay/CustomDayDisplay";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Calendar day_view={CustomDayDisplay} />
    </div>
  );
}

I want to use the customDayDisplay inside the Calender component to create a list of dates using the custom view like this:`

import moment, { Moment } from "moment";
import { useState, useEffect } from "react";
import CustomDayDisplay from "../customDayDisplay/CustomDayDisplay";

export default function Calendar({day_view}:{day_view:JSX.Element}) {
  const [startDate, setStartDate] = useState<Moment>();
  const [dates, setDates] = useState<JSX.Element[]>([]);
 
  
  useEffect(() => {
    console.log(`You opened times`);
    const currebtdate = moment();
    const nthDayOfWeek = currebtdate.day();
    let startday = currebtdate.subtract(nthDayOfWeek - 1, "days");
  
      // once 1 find the firt day of the week
      // I add the day to an array of days using  a custom view which will be  provided as prop
 
    const datecopy =  [<day_view key={0} date={startday} />];
    for (let i = 1; i < 7; i++) {
     startday = startday.clone().add(1, "days");
      datecopy.push(<day_view key={i} date={startday} />); 
    }
    setDates(datecopy);
  },[]);
  return (
    <div className="V">
      {}
      <h1>
        {moment().day()} + {startDate?.day()}{"ok "}
        {console.log('is dates', dates)}
      </h1>
      <div>
      {dates}
      </div>
      
    </div>
  );
}

`How can I pass a component as a reference in prop and then use it to dynamically create/use the component?

The CustomDayDisplay component can be anything