Getting error when using range calendar in a popover

[atlys-hein]

I have a Popover opening a Range calendar but I keep on getting this error locally
Invalid prop ref supplied to React.Fragment. React.Fragment can only have key and children props.

And I have a Autocomplete component in the same section as the date selector and when ever I close the the popover of the date selector (by pressing the select) the autocomplete focuses and opens which is not the desired behaviour. It looks like it is setting the data-focus=true on the auto complete from the Date selector popover

here is my component what could be the issue for this?

if anyone can help would really appreciate it

const HomeDateSelector = ({
  onDateChange,
}: {
  onDateChange: (date: { start: string; end: string }) => void
}) => {
  const searchParams = useSearchParams()

  const defaultDate = today(getLocalTimeZone())
  const [focusedDate, setFocusedDate] = useState<DateValue>(defaultDate)
  const [isOpen, setIsOpen] = useState(false)
  const [date, setDate] = useState<{
    start: string
    end: string
  } | null>(() => {
    const travelDate = searchParams.get("travelDate")
    const returnDate = searchParams.get("returnDate")
    return travelDate && returnDate
      ? { start: travelDate, end: returnDate }
      : null
  })

  const formattedDate = useMemo(() => {
    if (!date?.start || !date?.end) return null
    return `${dayjs(date.start).format("DD/MM/YYYY")} - ${dayjs(date.end).format("DD/MM/YYYY")}`
  }, [date])

  const handleDateChange = (value: RangeValue<DateValue>) => {
    if (!value?.start || !value?.end) return
    setDate({
      start: dayjs(value.start.toString()).format("YYYY-MM-DD"),
      end: dayjs(value.end.toString()).format("YYYY-MM-DD"),
    })
  }

  const handleSelect = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (!date?.start || !date?.end) return
    onDateChange(date)
    setIsOpen(false)
  }

  const handleReset = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDate(null)
    onDateChange({ start: "", end: "" })
  }

  return (
    <Popover
      autoFocus={false}
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      placement="bottom"
      shadow="sm"
      classNames={{
        content: "w-max",
      }}
    >
      <PopoverTrigger>
        <div className="flex h-7 w-full cursor-pointer items-center gap-2">
          <span
            className={formattedDate ? "text-default-800" : "text-default-500 "}
          >
            {formattedDate || "Select"}
          </span>
        </div>
      </PopoverTrigger>
      <PopoverContent>
        <section id="date-selector">
          <RangeCalendar
            visibleMonths={2}
            onChange={handleDateChange}
            value={
              date
                ? {
                    start: parseDate(date.start),
                    end: parseDate(date.end),
                  }
                : null
            }
            minValue={today(getLocalTimeZone())}
            bottomContent={
              <div className=" flex w-full justify-end gap-2 px-3 pb-2">
                <Button
                  variant="bordered"
                  color="primary"
                  className="border-small"
                  size="sm"
                  onClick={handleReset}
                >
                  Reset
                </Button>
                <Button color="primary" size="sm" onClick={handleSelect}>
                  Select
                </Button>
              </div>
            }
            focusedValue={focusedDate}
            onFocusChange={setFocusedDate}
            showShadow={false}
            classNames={{
              prevButton: "data-[disabled=true]:opacity-0",
              nextButton: "data-[disabled=true]:opacity-0",
              base: "bg-white border-none shadow-none w-full",
              gridBody: "bg-white",
              gridBodyRow: "gap-0.5",
              gridHeaderRow: "",
              gridWrapper: "",
              cell: "bg-white ",
              cellButton: [
                "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
                "data-[range-start=true]:before:rounded-l-small",
                "data-[selection-start=true]:before:rounded-l-small",
                "data-[range-end=true]:before:rounded-r-small",
                "data-[selection-end=true]:before:rounded-r-small",
                "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
                "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
                "data-[unavailable=true]:line-through data-[unavailable=true]:text-gray-400",
                "data-[outside-month=true]:!bg-transparent data-[outside-month=true]:!text-gray-400",
                "data-[selected=true]:data-[range-selection=true]:text-default-500 ",
                "data-[selected=true]:data-[range-selection=true]:bg-blue-50",
              ],
            }}
          />
        </section>
      </PopoverContent>
    </Popover>
  )
}

export default HomeDateSelector

[jrgarciadev]

Hey @atlys-hein I couldn't replicate the issue, please check https://stackblitz.com/edit/vitejs-vite-maesxg?file=src%2FApp.tsx