How to use React.forwardRef() with own ref in the component?

Question

Task
I'm trying to use React.forwardRef() and in the same time use React.useRef() in a component.

Problem
I can use either only myOwnRef or ref from forwardRef prop. So, I have no idea how to use them together. Example code:

interface IExampleInputProps {
    value: string,
    onChange: (event: ChangeEvent<HTMLInputElement>) => void
}
const ExampleInput = forwardRef<HTMLInputElement | null, IExampleInputProps>(({value, onChange}, ref) => { // can't to use "ref" parameter
    const myOwnRef = React.useRef<HTMLInputElement | null>(null);

    return <input ref={el => {
        myOwnRef.current = el; // => OK
        if (ref) { // trying to use the ref passed from the forwardRef function
            ref.current = el; // => ERROR
        }
    }} value={value} onChange={onChange}/>
})

Thanks a lot for your answers.

Answer 1

To access a ref while also forwarding it, it is simpler to do the following:

• Attach a ref created inside the component to the element.
• Call the useImperativeHandle hook on the outer ref (which is being forwarded to) and pass a function that returns the current property of the inner ref, which is the value that will be set to the current property of the outer ref.

import { forwardRef, useImperativeHandle, useRef } from 'react';
const MyComponent = forwardRef<HTMLInputElement, IExampleInputProps>(({value, onChange}, outerRef) => {
    const innerRef = useRef<HTMLInputElement>(null);
    useImperativeHandle(outerRef, () => innerRef.current!, []);
    // remember to list any dependencies of the function that returns the ref value, similar to useEffect
    return <input ref={innerRef} value={value} onChange={onChange} />;
});