react-big-calendar selection offset

I have a calendar component that uses react-big-calendar.

When I select a range of hours, it is not taking the selection from where the click started, but a little bit behind the selection.

Shown in this video.

My code: Calendar.tsx

import {Calendar, Views, dayjsLocalizer} from 'react-big-calendar'import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'import dayjs from 'dayjs'import timezone from 'dayjs/plugin/timezone'import 'react-big-calendar/lib/css/react-big-calendar.css'import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'import './styles.css'dayjs.extend(timezone)const localizer = dayjsLocalizer(dayjs)const DnDCalendar = withDragAndDrop(Calendar)const FullCalendar = ({...props}: FullCalendarProps) => {  return (<div className='d-flex h-100 flex-column w-100 gap-2 p-2'><ToolBar /><DnDCalendar        localizer={localizer}        dayLayoutAlgorithm='no-overlap'        showMultiDayTimes        resizable        selectable        {...props}      /></div>  )}export default FullCalendar

styles.css

.rbc-header {  color: var(--bs-gray-900);  font-size: 14px !important;  display: flex;  align-items: center;  justify-content: center;  height: 60px !important;  background: transparent;}.rbc-allday-cell {  display: none;}.rbc-today {  background-color: rgb(223, 255, 234);}.rbc-time-slot {  color: var(--bs-gray-900);  z-index: 1;  height: 2rem;}.rbc-time-slot:not(.rbc-today .rbc-time-slot) {  background-color: #fff;}.rbc-day-bg:not(.rbc-today, .rbc-selected-cell) {  color: var(--bs-gray-900);  background-color: #fff;}.rbc-event,.rbc-background-event {  z-index: 20;  padding: 0 !important;  border: none !important;}.rbc-day-slot .rbc-events-container {  padding: 0 !important;  margin: 0 !important;}

How to fix this selection offset?