React Flatpickr with plugins monthSelectPlugin got error on mobile view

Question

like what's in the title, I get an error when using flatpickr in react and I also add the monthSelectPlugin plugins. this error occurs when I try to open my website on mobile.

here is my code:

import { useRef, useState, useEffect } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import Flatpickr from 'react-flatpickr'
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js'
import 'flatpickr/dist/plugins/monthSelect/style.css'
import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from '@heroicons/react/24/solid'
import dayjs from 'dayjs'


const Schedule = () => {
    const flatpickrOptionn = {
        warp: true,
        plugins: [
            new monthSelectPlugin({
                shorthand: true,
                dateFormat: "F Y",
                altFormat: "F Y",
            })
        ]
    }

    const calendar = useRef()
    const selectMonth = useRef()

    const [month, setMonth] = useState(dayjs().format('MMMM YYYY'))

    const handleMonthChange = (e) => {
        setMonth(dayjs(e).format('MMMM YYYY'))
        const api = calendar.current.getApi()
        api.gotoDate(dayjs(e).toISOString())
    }

    const handlePrevMonth = () => {
        const api = calendar.current.getApi()
        api.prev()
        setMonth(api.currentData.viewTitle)
    }
    
    const handleNextMonth = () => {
        const api = calendar.current.getApi()
        api.next()
        setMonth(api.currentData.viewTitle)
    }
    return (
        <>
            <div className="mb-3 w-full flex justify-between items-center">
                <div>
                    <button className="btn btn-ghost" onClick={() => handlePrevMonth()}><ChevronLeftIcon className="w-6 h-6"/></button>
                    <Flatpickr ref={selectMonth} options={flatpickrOptionn} className="text-3xl font-semibold w-64 text-center" value={month} onChange={handleMonthChange}/>
                    <button className="btn btn-ghost" onClick={() => handleNextMonth()}><ChevronRightIcon className="w-6 h-6"/></button>
                </div>
                <div className="float-right">
                    <button className="btn btn-success btn-sm text-white" onClick={() => showModal('create')}>
                        <PlusIcon className="w-3 h-3"/>
                        Create
                    </button>
                </div>
            </div>
            <FullCalendar
                ref={calendar}
                plugins={[ dayGridPlugin ]}
                initialView="dayGridMonth"
                headerToolbar={false}
                selectable={true}
            />
        </>
    )
}

export default Schedule

here is the error message:

I've tried searching the documentation but didn't find a solution. the result I want is for this flatpickr to run on mobile or desktop to select the month.

if anyone have experienced the same problem and have found a solution or have other alternative ways, please help me to solve this problem.

Thanks.