Using button for input focus

button-w-focus.jsx

import { useRef } from "react";

const Component1 = ({ inputRef }) => {
  const handleClick = () => {
    inputRef.current.focus();
  };
  return (
    <div className='col-sm-2 col-xs-12 p-2 border border-primary'>
      <button className='btn btn-primary' onClick={handleClick}>
        Click to focus
      </button>
    </div>
  );
};

const Component2 = ({ inputRef }) => {
  return (
    <div className='col-sm-10 col-xs-12 p-2 border border-primary'>
      <input ref={inputRef} type='text' className='form-control' />
    </div>
  );
};

export default function App() {
  const inputRef = useRef();
  return (
    <div className='container'>
      <h1 className='text-center'>Button for Focus</h1>
      <div className='row'>
        <Component1 inputRef={inputRef} />
        <Component2 inputRef={inputRef} />
      </div>
    </div>
  );
}