React Typerscript How to pass a function to my class from another function file? - react-tsx

Question

I'm new to React Typerscript, and I'm trying to figure out how to pass useModal function from RsvpPage to EventDescriptionPage.
`
import Modal from "./Modal";
import useModal from "./UseModal";
class EventDescriptionPage extends Component<any,any> {
constructor(props:any){
super(props);
}
render(){
return (
<div onClick={this.props.useModal}>
<button className='button' onClick={this.props.toggle}> RSVP </button>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggle}></Modal>
</div>
</header>
</div>
);
}
}
export default EventDescriptionPage;
`
`
import EventDescriptionPage from "./EventDescriptionPage";
import Modal from "./Modal";
import useModal from "./UseModal";
function RsvpPage(){
const { isOpen, toggle } = useModal();
return (
<div>
<EventDescriptionPage/>
</div>
);
}
export default RsvpPage;
`
`
import { useState } from "react";
export default function UseModal() {
const [isOpen, setisOpen] = useState(false);
const toggle = () => {
setisOpen(!isOpen);
};
return {
isOpen,
toggle
};
}
`
`
import React, { ReactNode } from "react";
import "./Modal.css";
interface ModalType {
children?: ReactNode;
isOpen: boolean;
toggle: () => void;
}
export default function Modal(props: ModalType) {
return (
<>
{props.isOpen && (
<div className="modal-overlay" onClick={props.toggle}>
<div onClick={(e) => e.stopPropagation()} className="modal-box">
{props.children}Abaabaabaaba
</div>
</div>
)}
</>
);
}
`
I think my syntax is not right, but I'm not sure how to access useModal() function in RsvpPage.esx file.