React 19 Compatibility: "Accessing element.ref was removed" error

[rishikesh-janrao]

Description:
With the release of React 19, ref is now treated as a regular prop, and accessing ref directly on a React element (element.ref) has been deprecated and now throws an error/warning. The @google-pay/button-react library appears to be accessing the ref property on a JSX element internally (possibly via React.cloneElement or internal prop inspection), which is incompatible with the new React 19 behavior.

Steps to Reproduce:
Create a React project using React 19 (npm install react@latest react-dom@latest).

Install @google-pay/button-react.

Implement the GooglePayButton in a functional component.

Run the application and check the browser console.

Error Message:
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."

Expected Behavior:
The component should render and function without attempting to access the deprecated element.ref property, aligning with React 19's updated prop handling.

Environment:
Library Version: (e.g., 3.2.1)

React Version: 19.0.0

Browser: (e.g., Chrome/Firefox)

Language: JavaScript / JSX

[dmengelt]

thanks for reporting this @rishikesh-janrao

Could you take a look at #371 - I added a quick test to check if the code attempts to read the ref property. It would throw an error if so. However, the test passes.

Additionally, I quickly created a React 19 app and don't see errors in the console: