How to write snapshot test for React Big Calendar

Question

I import react-big-calendar for my project.
I need to write a test for this component.
For now, I just want to test if the event was successfully created.
So my code is Calenadr.jsx:

import { useState } from "react";
import React from "react";
import { Calendar, momentLocalizer} from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'

export default function Calender() {
    const localizer = momentLocalizer(moment)
    const [events, setEvenets]=useState([]);
    
    const onSelectEvent=(pEvent)=> {
        const r = window.confirm("Would you like to remove this event?")
        if(r === true){
            const events_=[...events];
            const idx = events_.indexOf(pEvent);
            events_.splice(idx, 1);
            setEvenets(()=>[...events_] );
            }
    } 
    let formats = { 
        dayFormat: (date, culture, localizer) =>
        localizer.format(date, 'dd', culture),
        timeGutterFormat: (date, culture, localizer) => 
        localizer.format(date, 'hA', culture),
        eventTimeRangeFormat: ({ start, end }, culture, localizer) => {
          let s = localizer.format(start, ' ', culture);
          let e = localizer.format(end, ' ', culture);
          return `${s}  ${e}`;
        },    
    }
    //selecting events 
    const handleSelect = ({ start, end }) => { 
        setEvenets(
            events=> [...events, {
                start: start,
                end: end,            
            }]   
        )    
    }
    return (
        <><Calendar
            selectable
            defaultDate={new Date(2006, 1, 1)}
            isGutter={true}
            localizer={localizer}
            events={events}
            toolbar={false}
            formats={formats}
            defaultView='week'
            timeslots={4}
            step={15}
            min={new Date(0, 0, 0, 7, 0, 0)}
            max={new Date(0, 0, 0, 22, 0, 0)}
            style={{ height: 800 }}
            onSelectEvent={event => onSelectEvent(event)}
            onSelectSlot={handleSelect} />
            </>

    )}

I do not need to display a title and time in blue rectangular, so I can only get an empty rectangular.

output Please click and see what is output.

It looks like nothing in the class="rbc-time-slot"
So I don't know how to test if the event is created.
I search the method like fireEvent.click(x.coordinate, y.coodinate), nothing to work with this method.
I asked for TA, he give the suggestion that is dateInput.simulate('change', {target: { value: "2018-01-04" }});
The point is I cannot find any thing like 2018-01-04 in the snapshot. It only give me class="rbc-time-slot".
For now, I have this:

it('test creat function', () => {
const date = new Date(2006, 1,1)
const y = date.getFullYear()
const m = date.getMonth()
const d = date.getDay()
let dd = date.getDate()
let start = new Date(y, m, dd, "7" ,"00", 0)
let end = new Date(y, m, dd, "20", "30",0)
const events= {start:start, end:end}
const tree = render(<selectable prop="testing" events={events}/>);
fireEvent.click(x, y)
function click(x, y)
{
var ev = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
 });

 var el = document.elementFromPoint(x, y);

 el.dispatchEvent(ev);
}
click(70, 400);

expect(tree).toMatchSnapshot();
//should check something is not empty, not to check tree.toMatchSnapshot
});

Is there any ideas?
I search online but seems there are no topics related to the test.
Any help will be appreciated.