React.js 19 nullable RefObject type is not supported

[clacladev]

Provide a general summary of the issue here

In React 19 useRef and references in general have been refactored. Now they are stricter, they return null as potential value in their type.

useRef<HTMLDivElement>(null) will return:

• RefObject<HTMLDivElement | null> in React 19
• RefObject<HTMLDivElement> in React 18

A lot of React Aria hooks which accept a RefObject as input to create the component state, do not accept a nullable reference (RefObject<HTMLDivElement | null>).

For example

const calendarPopoverRef = useRef<HTMLDivElement>(null);
const { calendarProps } = useDatePicker<ZonedDateTime>(
    dateTimeInputProps,
    state,
    calendarPopoverRef, // <<< This will throw a Typescript error
);

🤔 Expected Behavior?

Hooks like useDatePicker should accept a RefObject<Element | null> type.
In general all packages should be checked against the TSC compiler.

😯 Current Behavior

It creates a TS error.

💁 Possible Solution

A temporary workaround is to add a cast to suppress the TS error. This is not a permanent solution though.

const calendarPopoverRef = useRef<HTMLDivElement>(null);
const { calendarProps } = useDatePicker<ZonedDateTime>(
    dateTimeInputProps,
    state,
    calendarPopoverRef as RefObject<Element>, // TODO: cleanup this type cast
);

🔦 Context

I am upgrading Nextjs 15.1 which also upgraded to stable React 19.

🖥️ Steps to Reproduce

• Upgrade you examples to have react and @types/react to v19
• Run npm tsc

Version

"@react-aria/datepicker": "^3.11.0"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response