Argument appears to not be a ReactComponent. Keys:

Question

I need to print a component for that i'm using react-to-print package. here everything is working fine. when i try to customize it based on my requirement i'm getting this error. i tried to search in the google but didn't get any proper solution. so here i posted.

this is the component i want to print it.

const  ModalContent=React.forwardRef(({ ticketDetails, bookingHistory, movie }, ref)=>{

    var op = movie.filter((e, i, arr) => {
        return e._id == bookingHistory.movieId
    })

    const [invoiceSummary, setinvoiceSummary] = useState({
        totalSeatCount: bookingHistory.seatSeletion.length,
        ticketPrice: op[0].ticketPrice,
        gstRate: op[0].gst,
        serviceCharge: op[0].serviceCharge
    })
   
    const [summaryFinalOk, setsummaryFinalOk] = useState(true);
    useImperativeHandle(ref, () => ({
        showTick() {
            setsummaryFinalOk(true);
        }
    }));
    return (<>

        <div className="card">
            {summaryFinalOk ?<>
                <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
                    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
                </svg>
                 <h3>your Ticket has been Confirmed</h3></>
                 : <>
                    <div className="card-header bg-black"></div>
                    <div className="card-body">
                        <div className="row">
                           

                            <div className="row text-center">
                                <h3 className="text-uppercase text-center mt-3 invoice-h3" >Invoice</h3>
                            </div>

                            <div className="row mx-3">
                                <table className="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Ticket Order Summary </th>
                                            <th scope="col">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Ticket price</td>
                                            <td>{invoiceSummary.totalSeatCount} x {invoiceSummary.ticketPrice} =  {invoiceSummary.totalSeatCount * invoiceSummary.ticketPrice}<i class="fa-solid fa-indian-rupee-sign"></i></td>
                                        </tr>
                                        <tr>
                                            <td>Gst</td>
                                            <td>{invoiceSummary.gstRate} % ={(invoiceSummary.totalSeatCount * invoiceSummary.ticketPrice) * invoiceSummary.gstRate / 100}<i class="fa-solid fa-indian-rupee-sign"></i></td>
                                        </tr>
                                        <tr>
                                            <td>Internet Handling</td>
                                            <td>{invoiceSummary.totalSeatCount} x{invoiceSummary.serviceCharge}={invoiceSummary.totalSeatCount * invoiceSummary.serviceCharge}<i class="fa-solid fa-indian-rupee-sign"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <hr></hr>
                          
                        </div>
                    </div>
                </>}
        </div>

    </>);
})

in index.js

import React, { memo, useEffect, useState, useRef, useCallback } from 'react';
import  {useReactToPrint} from 'react-to-print';
import ModalContent from './modalContent';
function TicketBooking({ }) {
    const tick=useRef();
  

    //print the data
   

 const handlePrint = useReactToPrint({
        content: () => tick.current
      });
      const showcontent = ()=>{

      }
    
    return (
        <div className="container screen-design">
         <button onclick={showcontent}>showcontent</button>
                    <ModalContent ticketDetails={""} ref={tick} bookingHistory={[]} movie={""}></ModalContent>
                    <button onclick={handlePrint}>print</button>
        </div>)
}
export default memo(TicketBooking);

so when i click the showcontent the button i can able to see the content. but when i click the print button i got following error.

can any one know how to solve this.