Input loses focus after every letter I type

SearchBox is defined inside ProductList. Every render (so every keystroke) creates a brand-new SearchBox function, and React sees it as a different component type. It throws away the old input and mounts a new one, which has no focus.

Move it out, pass what it needs:

function SearchBox({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

export default function ProductList({ products }) {
  const [query, setQuery] = useState("");
  return (
    <div>
      <SearchBox value={query} onChange={setQuery} />
      ...

Or just inline the <input> there, it's one line.

Rule: never declare a component inside another component.