EXAMPLE FOR : forwarding Ref's

App.js

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

Child.js

//child
const Child = React.forwardRef((props, ref) => {
  return (
    <div>
      <input ref={ref} />
    </div>
  );
});

Parent.js

//parent
class Parent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusHandler = () => {
    this.inputRef.current.focus();

  };

  render() {
    return (
      <div>
        <Child ref={this.inputRef} />
        <button onClick={this.focusHandler}>focus Input</button>
      </div>
    );
  }
}

Ref forwarding is a technique for automatically passing a ref through a component to one of its children.