How to make an input field active when clicking on another element?

Question

React

Good afternoon!
I am writing a universal TextField component that can be used on application pages.
Task: when clicking on the pencil icon , it is necessary to make the input field active i.e. focus.
Solution: hang ref on the input field, make ref unique for each field.
But this solution seems clumsy to me, maybe there are more concise methods?
Working example: https://codesandbox.io/s/rrjvjy5qp4

Answer 1

Solution: hang ref on input field

Good decision.
It makes no sense. Use one ref in the TextField component, it will be unique in each created instance of the component.