Argument appears to not be a ReactComponent. Keys: - reactjs

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.