React form input focus validation with refs

Hard

In a complex form application, you need to programmatically focus inputs based on validation states. What's the correct way to implement the missing code to make this work?

ReactRefsForwardrefUseimperativehandleForms

1const Input = forwardRef((props, ref) => {
const inputRef = useRef(null);
const [error, setError] = useState(null);

// Missing implementation
____________________
____________________
____________________
9
return (
  <div className="input-wrapper">
    <input
      {...props}
      ref={inputRef}
      className={error ? 'error' : ''}
    />
    {error &amp;&amp; <span className="error-message">{error}</span>}
  </div>
);
20});
21
22function Form() {
const firstNameRef = useRef(null);
const lastNameRef = useRef(null);
25
const handleSubmit = (e) => {
  e.preventDefault();
  if (!firstNameRef.current.value) {
    firstNameRef.current.focus();
    firstNameRef.current.setError('Required field');
  }
};
33
return (
  <form onSubmit={handleSubmit}>
    <Input ref={firstNameRef} name="firstName" />
    <Input ref={lastNameRef} name="lastName" />
  </form>
);
40}

In a complex form application, you need to programmatically focus inputs based on validation states. What's the correct way to implement the missing code to make this work?

Hint