import React, { StrictMode, useRef, useImperativeHandle } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function Search({ ref }) {
  const node = useRef(null);
  useImperativeHandle(
    ref,
    () => ({
      focusSearch() {
        node.current?.focus();
      },
    }),
    [],
  );
  return (
    <label>
      Search items
      <input ref={node} />
    </label>
  );
}
function App() {
  const search = useRef(null);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <Search ref={search} />
      <button onClick={() => search.current?.focusSearch()}>
        Focus through the handle
      </button>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);