Fullcalendar - Prevent Event Overlap When dateClick Event Fired

I would like to prevent a new slot being created when already occupied. For example, if the dates selected overlap e.g. Slot one has 10am to 11am and potential added slot is 10:15 to 11:15, I want to block this as some of the time is already taken.

Currently, I am trying to use the dateEvent option in Vue but it still creates the slot. I wanted to get the current slot data but can't find a way of doing this and eventOverlap and slotEventOverlap seem to do nothing in this context.

Has anyone run into this problem before?

Code Example:

export default {
  components: {
    FullCalendar
  },
  mounted() {
    console.log('Component mounted.')
  },
  data() {
    return {
      allEvents: [],
      calendarOptions: {
        plugins: [timeGridPlugin, dayGridPlugin, interactionPlugin],
        initialView: 'timeGridDay',
        selectable: true,
        selectMirror: true,
        allDaySlot: false,
        slotDuration: "00:15:00",
        slotMinTime: '09:00:00',
        slotMaxTime: '19:00:00',
        editable: false,
        eventLimit: true,
        eventOverlap: false,
        slotEventOverlap: false,
        dateClick: this.handleDateClick,
        events: function (fetchInfo, successCallback, failureCallback) {
            //...
        },
      }
    }
  },
  methods: {
    handleDateClick: function (arg) {
      console.log(arg, arg.view.getCurrentData())
      let startDateTime = new Date(arg.dateStr)
      let endDateTime = new Date(arg.dateStr)
      const calendar = this.$refs.fullCalendar.getApi()

      var event = calendar.getEventById('my-event')

      if (event) {
        event.remove()
      }

      calendar.addEvent({
        id: 'my-event',
        title: 'Selected Slot',
        start: startDateTime,
        end: new Date(endDateTime.setHours(endDateTime.getHours() + 1))
      })

      calendar.unselect()
    }
  },
}