Forward Ref

We have two components: <TextInput /> and <App />. TextInput renders a text input field.

const TextInput = () => (
  <div>
    <input type="text" />
  </div>
)

App component consumes TextInput.

const App = () => {
  return (
    <div>
      <TextInput />
      <TextInput />
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  )
}

When Button 1 is clicked, first textbox should get focus and when second button is clicked, second textbox should get focus. How can we do that using ref?

Solve this medium problem to earn  2