Cannot Access isInvalid Prop from DateRangePicker onChange Handler

Provide a general summary of the issue here

I'm trying to validate a date range selection using the isInvalid prop inside the onChange callback of the DateRangePicker. However, isInvalid does not seem to be accessible there. I need to conditionally run logic based on whether the selection is valid.

Is there a correct way to do this behaviour? I must not be the first one to want to check for validity before using the value in the onChange.

🤔 Expected Behavior?

isInvalid should be available inside the onChange handler or via another mechanism during date selection.

😯 Current Behavior

Can only access the isInvalid prop from children of the DateRangePicker element.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

import { parseDate } from "@internationalized/date"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/registry/default/ui/button"
import {
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarHeading,
  RangeCalendar,
} from "@/registry/default/ui/calendar"
import {
  DatePickerContent,
  DateRangePicker,
} from "@/registry/default/ui/date-picker"
import { DateInput } from "@/registry/default/ui/datefield"
import { FieldGroup, Label } from "@/registry/default/ui/field"

export default function DateRangePickerDemo() {
  return (
    <DateRangePicker
      className="min-w-[320px] space-y-1"
      onChange={() => {
        console.log("Check validity here")
      }}
      maxValue={parseDate("2023-10-01")} //Should trigger validation
    >
      {(props) => {
        console.log("isInvalid", props.isInvalid)
        return (
          <>
            <Label>Date range</Label>
            <FieldGroup>
              <DateInput variant="ghost" slot={"start"} />
              <span aria-hidden className="px-2 text-sm text-muted-foreground">
                -
              </span>
              <DateInput className="flex-1" variant="ghost" slot={"end"} />

              <Button
                variant="ghost"
                size="icon"
                className="mr-1 size-6 data-[focus-visible]:ring-offset-0"
              >
                <CalendarIcon aria-hidden className="size-4" />
              </Button>
            </FieldGroup>
            <DatePickerContent>
              <RangeCalendar>
                <CalendarHeading />
                <CalendarGrid>
                  <CalendarGridHeader>
                    {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
                  </CalendarGridHeader>
                  <CalendarGridBody>
                    {(date) => <CalendarCell date={date} />}
                  </CalendarGridBody>
                </CalendarGrid>
              </RangeCalendar>
            </DatePickerContent>
          </>
        )
      }}
    </DateRangePicker>
  )
}

Version

"react-aria-components": "^1.6.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response