SPIKE: Refactor SearchField

We appear to have some conflicting and slightly iffy code for ensuring focus on searchField on mount.

In the index files we have a function:

const focusSearchField = () => {
  const el = document.getElementById(searchInput());
  if (el) {
    el.focus();
  } else {
    history.push(stripes.home);
  }
};

Where the `searchInput` method finds the element id from the url. This code alone is slightly ugly looking and could do with some thought, but then we also have the following in those SASQ-rendering route components which have been refactored to functional:

useEffect(() => {
  if (searchField.current) {
    searchField.current.focus();
  }
}, []);  // This isn't particularly great, but in the interests of saving time migrating, it will have to do 

This feels like a repeat of logic, and using a focus within a mount-only useEffect also feels like a race-condition waiting to happen.

Some thought is needed on the best way to approach this across our apps.