我正在使用NextJS，typescript，tailwindcss，react-calendar库开发一个日历组件，在选择日期范围时遇到了日历中重复日期的问题。我在其他地方添加了重复日期的例外情况，但我无法删除下个月的重复日期-除了选定的日期和另一个月的日期之外，该月的所有日期都是重复的。
此外，还有一个问题，无法选择当前的日，月，年的日历。
请帮助理解和解决这个问题。
https://codesandbox.io/p/sandbox/young-hill-63l7v7

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import ReservationModal from './ReservationModal';

import '../calendar/CusCalendar.css';

const CusCalendar: React.FC = () => {
  const [selectedDates, setSelectedDates] = useState<Date[] | Date | null>(null);
  const [showCalculation, setShowCalculation] = useState(false);
  const [showReservationPopup, setShowReservationPopup] = useState(false);
  const [currentMonth, setCurrentMonth] = useState(new Date());

  const startDate = Array.isArray(selectedDates) ? selectedDates[0] : null;
  const endDate = Array.isArray(selectedDates) ? selectedDates[1] : null;
  const pricePerNight = 100;

  const nights = startDate && endDate ? Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 3600 * 24)) : 0;
  const totalPrice = nights * pricePerNight;

  const isDateSelected = (date: Date) => {
    return startDate && endDate && date >= startDate && date <= endDate;
  };

  const handleDateChange = (date: Date | Date[]) => {
    if (!startDate || (startDate && endDate)) {
      setSelectedDates(Array.isArray(date) ? date : [date]);
    } else {
      if (Array.isArray(date) && date[0] >= startDate) {
        setSelectedDates(date);
      } else {
        setSelectedDates(Array.isArray(date) ? date : [date]);
      }
    }
  };

  const handleCalculate = () => {
    if (startDate && endDate) {
      const numberOfNights = Math.floor(
        (endDate.getTime() - startDate.getTime()) / (1000 * 3600 * 24)
      );
      const totalPrice = numberOfNights * pricePerNight;
      setShowCalculation(true);
    }
  };

  const handleClearDates = () => {
    setSelectedDates(null);
  };

  const handleReserve = () => {
    if (startDate && endDate) {
      setShowReservationPopup(true);
    }
  };

  const handleReserveClick = () => {
    setShowReservationPopup(true);
  };

  const handleMonthChange = (newMonth: Date) => {
    setCurrentMonth(newMonth);
  };

  return (
    <div className="text-start border-4 rounded-[30px] solid border-[#ebebeb] w-[478px] h-full">
      {!showCalculation ? (
        <div>
          <div className="text-[28px] font-bold text-[#313131] leading-normal uppercase pl-7 pt-7 pb-3">SELECT CHECK-IN DATE</div>
          <div className="text-[18px] font-normal leading-normal text-[#969696] pl-7 pb-7">Add your travel dates for exact pricing</div>
        </div>
      ) : null}
      <div className="mx-7">
        {!showCalculation ? (
          <Calendar
            onChange={handleDateChange as any}
            selectRange={true}
            tileContent={({ date, view }) => {
              if (view === 'month') {
                if (selectedDates === null || isDateSelected(date)) {
                  return null;
                } else if (date < new Date()) {
                  return null;
                } else if (
                  (startDate && endDate) &&
                  (date.getMonth() !== startDate.getMonth() || date.getMonth() !== endDate.getMonth())
                ) {
                  return null;
                } else {
                  return (
                    <div className="">
                      {date.getDate()}
                    </div>
                  );
                }
              }
              return null;
            }}
            tileDisabled={({ date }) => date <= new Date()}
          />
        ) : null}
      </div>
...