Adding a widget to the outside of a map div in react

[ClintonLunnUGS]

Hi all,

I am trying put a search widget into a sidebar in my project app, but am running into some issues. 

Issues I'm seeing:

• when trying to render the SearchBar in my Toolbar component, the search widget seems to get correctly created but never appears in my sidebar.
• if I put the SearchBar into the Header component (not a lazy loaded component), it works on page load, but if I save the SearchBar file again, the search bar disappears. See below for how I am implementing the SearchBar. 

I've created a github repo to illustrate issues I am seeing. https://github.com/clintonlunn/arcgis-react-template. Any suggestions would be much appreciated.

import Search from "@arcgis/core/widgets/Search.js";
import React, { useContext, useEffect, useRef } from "react";
import { MapContext } from "../contexts/MapProvider";

function SearchBar() {
  const { view } = useContext(MapContext);
  const searchDivRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    let searchWidget: __esri.widgetsSearch;
    if (view && searchDivRef.current) {
      console.log("Creating search widget");
      console.log("View:", view);

      searchWidget = new Search({
        view: view,
        sources: [],
        container: searchDivRef.current,
      });

      console.log("Search widget:", searchWidget);
    } else {
      console.log("View or searchDivRef.current is not available");
    }

    return () => {
      if (searchWidget && searchWidget.destroy) {
        searchWidget.destroy();
      }
    }
  }, [view]);

  return <div ref={searchDivRef}></div>;

}

export default SearchBar;

Thank you,

Clinton