Add an event outside of calendar with fullcalendar - reactjs

Question

I am using fullcalender library to make a big calendar for my project, in their documentation as far as I see, I can only add events by clicking on the empty dates in calendar. But I am trying to add a button outside of a calendar which will show a popup when clicked and user can add an calendar event. I can just create a button outside of calender and call a function like
function handleAddEvent () {
// how do I get selectionInfo here ?
}
<>
<button onClick={handleAddEvent}>Add an event to calender</button>
<FullCalendar
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
]}
...
/>
</>
but I can't find a way to get the selectionInfo ( is a plain object with the following properties) as it comes from <FullCalendar> and it is necessary to add an event to a calendar. Are there any workarounds for this ? Thanks in advance.
You can see my code sample here
UPDATE
I used customButtons to create an external button to get necessary information from user and add an event along with useRef as calendarRef.current.getApi() to use addEvent to create an event. My codes will be
<FullCalendar
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
]}
ref={calendarRef}
headerToolbar={{
left: "prev,next today customAddEventBtn",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
}}
initialView="dayGridMonth"
customButtons={{
customAddEventBtn: {
text: "Add an event",
click: handleCustomAddEventBtn,
},
}}
/>
function handleCustomAddEventBtn() {
let calendarApi = calendarRef.current.getApi();
if (title) {
calendarApi.unselect(); // clear date selection
calendarApi.addEvent({
id: uuidv4(),
title,
start: selectedFromDate, // state to get date form user
end: selectedToDate, // state to get date form user
allDay: true,
});
}
}