Using useRef and/or forwardRef to expose children DOM node

Extensions
1

I’m trying to use useRef to set focus on a TextField inside a modal, but I can’t seem to get a reference to the element. I always get a warning:

“Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?”

I’ve already wrapped the component using forwardRef, but the issue persists.

Does anyone know if this is a limitation with Shopify?

App.js (just relevant parts)

// Imports...
import ModalContent from "./components/ModalContent.jsx";

export default reactExtension("purchase.checkout.block.render", () => <App />);

function App() {
	// ...
	const ref = useRef(null);
	// ...
	return (
		<Pressable key={v.id} padding="none" overlay={<ModalContent ref={ref}/>} >
			<Image .../>
		</Pressable>
	)
}

/components/ModalContent.jsx (just relevant parts)

// imports..

export default React.forwardRef(function ModalContent({variant}, ref) {
	//...
	return (
		<Modal>
			<Image .../>
			<TextField ref={ref}/>
		</Modal>
	)
})