How to stop the rerender of a calendar component when displaying a modal component on top of it in React?

Question

My main page contains a calendar where you can create events. To create an event I display a modal, which causes unintentional rerender of the calendar. So this causes displaying current week in the calendar and not the week where I wanted to create the event. I think the problem is caused by using showModal state in the calendar component which triggers the rerender after displaying the modal. However, I'm not quite sure how to fix it. I'd be grateful for some tips.

Calendar:

export default function CalendarComponent({onTimeRangeSelected}) {
  const [events, setEvents] = useState([]);
  const [showModal, setShowModal] = useState(false);

  const getCalendar = () => {
    return calendarRef.current.control;
  }

  useEffect(() => {
    const getEvents = async() => {
        return await pb.collection('events').getFullList();
    }
    getEvents().then(data => {
      const mappedEvents = data.map(event => ({
        id: event.id,
        start: new Date(event.start),
        end: new Date(event.end)
      }));
      setEvents(mappedEvents);
    })
  }, [])

  const createEvent = async(args) => {
    const dp = getCalendar();
    const event = await pb.collection('events').create({
      start: args.start,
      end: args.end
    });

    dp.events.add({
      id: event.id,
      start: args.start,
      end: args.end,
    });
  }

  const handleTimeRangeSelected = async (args) => {
    const dp = getCalendar();
    setShowModal(!showModal);
    createEvent(args);
  }

return (
      <div style={styles.wrap}>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"Week"}
            weekStarts = {1}
            showMonths={2}
            skipMonths={2}
            startDate={date}
            selectionDay={date}
            onTimeRangeSelected={ args => {
              getCalendar().update({
                startDate: args.day
              });
            }}
          />
        </div>
        <div style={styles.main}>
          <DayPilotCalendar
            events={allEvents}
            ref={calendarRef}
            viewType = {"Week"}
            weekStarts = {1}
            headerDateFormat = {'dddd d.M.yyyy'}
            durationBarVisible = {false}
            timeRangeSelectedHandling = {"Hold"}
            onTimeRangeSelected={handleTimeRangeSelected}
          />
        </div>
        {showModal && <CreateEvent showModal={showModal} setShowModal={setShowModal}></CreateEvent>}
      </div>
    );
}

Modal:

export default function CreateEvent({showModal, setShowModal}) {
    const [lesson, setLesson] = useState('');
    const [lessons, setLessons] = useState([]);

    const toggleModal = () => {
        setShowModal(!showModal);
    }

    if (showModal) {
        document.body.classList.add('active-modal');
    } else {
        document.body.classList.remove('active-modal');
    }

    useEffect(() => {
        const getLessons = async() => {
            return await pb.collection('lessons').getFullList();
        }
        getLessons().then(data => {
            setLessons(data); 
        })
    }, [])

    const handleLessonChange = (e) => {
        setLesson(e.target.value);
    }

    console.log(lessons);
    return(
        <>
            {(
                <div className="modal">
                    <div className="overlay" onClick={toggleModal}></div>
                    <div className="modal-content">
                        <input type="button" className="close-modal" onClick={toggleModal} value={"X"}></input>
                        <label htmlFor="lesson">Předmět:</label>
                        <select id="lesson" value={lesson} onChange={handleLessonChange}>
                        {lessons.map((lesson) => {
                            return(
                                <option value={lesson.name}>{lesson.name}</option>
                            )
                        })}
                        </select>
                    </div>
                </div>
            )}
        </>
    )
}