How to fix Warning: Non-string ref will not work with function components in React

If the child function component simply renders a DOM element, move the ref to that element and expose any public APIs through props instead. Example:

function TextInput(props: {}) {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(props.forwardedRef, () => ({
    focus: () => inputRef.current?.focus(),
  }));

  return <input ref={inputRef} />;
}

const ForwardedTextInput = forwardRef((props, ref) => (
  <TextInput {...props} forwardedRef={ref} />
));

This keeps the actual DOM reference inside the component while still letting the parent interact with the exposed methods.

React cannot make refs point at function components unless you opt into forwarding. Wrap the component declaration with forwardRef and pass the ref down to a DOM node or into useImperativeHandle:

const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <button ref={ref} {...props} />
));

Now parents can safely attach refs to <Button /> without hitting the warning.

Not every function component automatically accepts refs. Inspect the documentation or source code of libraries (e.g., React Router, Radix UI, etc.) to see if they expose a forwardRef API or supply a helper prop such as componentRef.

If the component cannot forward refs, wrap it with another forwardRef container that renders a DOM node you control and forwards the ref there.

String refs are legacy and have never worked on function components. Stick with const ref = useRef<T>(), createRef(), or callback refs and keep them attached to DOM nodes. When you need to forward them through multiple layers, explicitly forward the ref at each layer.