starkraving

const Component1 = () => (
  <div className='col-sm-2 col-xs-12 p-2 border border-primary'>
    <label for='myinput' className='btn btn-primary'>
      Click to focus
    </label>
  </div>
);

const Component2 = () => (
  <div className='col-sm-10 col-xs-12 p-2 border border-primary'>

starkraving

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