diff --git a/src/components/search-wizard/filters/StreetAddress.jsx b/src/components/search-wizard/filters/StreetAddress.jsx
deleted file mode 100644
index 81988987..00000000
--- a/src/components/search-wizard/filters/StreetAddress.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import appConfig from '../../../app-config.js';
-import Sherlock, {
-  LocatorSuggestProvider,
-} from '../../../utah-design-system/Sherlock.jsx';
-import Buffer from './Buffer';
-
-export default function StreetAddress({ send }) {
-  const [sherlockConfig, setSherlockConfig] = useState(null);
-  const [address, setAddress] = useState(null);
-  const [bufferGeometry, setBufferGeometry] = useState(null);
-
-  useEffect(() => {
-    const filter =
-      bufferGeometry && address
-        ? {
-            geometry: bufferGeometry,
-            name: `Street Address: ${address?.attributes?.Match_addr}`,
-          }
-        : {
-            geometry: null,
-            name: null,
-          };
-    send({ type: 'SET_FILTER', filter });
-  }, [address, bufferGeometry, send]);
-
-  useEffect(() => {
-    const provider = new LocatorSuggestProvider(
-      appConfig.urls.masquerade,
-      3857,
-    );
-    setSherlockConfig({
-      placeHolder: 'street address, city or zip',
-      onSherlockMatch: (features) => setAddress(features[0]),
-      provider,
-      maxResultsToDisplay: 10,
-    });
-  }, [setSherlockConfig]);
-
-  return (
-    <>
-      <Buffer onChange={setBufferGeometry} inputGeometry={address?.geometry} />
-      {sherlockConfig && <Sherlock {...sherlockConfig} />}
-      {/* buffer to make sure user can scroll far enough to see the entire select filter type dropdown */}
-      <div className="h-28" />
-    </>
-  );
-}
-
-StreetAddress.propTypes = {
-  send: PropTypes.func.isRequired,
-};
diff --git a/src/components/search-wizard/filters/StreetAddress.stories.jsx b/src/components/search-wizard/filters/StreetAddress.stories.tsx
similarity index 100%
rename from src/components/search-wizard/filters/StreetAddress.stories.jsx
rename to src/components/search-wizard/filters/StreetAddress.stories.tsx
diff --git a/src/components/search-wizard/filters/StreetAddress.tsx b/src/components/search-wizard/filters/StreetAddress.tsx
new file mode 100644
index 00000000..39ac1d09
--- /dev/null
+++ b/src/components/search-wizard/filters/StreetAddress.tsx
@@ -0,0 +1,90 @@
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import { useEffect, useRef, useState } from 'react';
+import appConfig from '../../../app-config';
+import Sherlock, {
+  LocatorSuggestProvider,
+} from '../../../utah-design-system/Sherlock';
+import Buffer from './Buffer';
+import { Geometry } from '@arcgis/core/geometry.js';
+import useMap from '../../../contexts/useMap';
+
+type StreetAddressProps = {
+  // eslint-disable-next-line no-unused-vars
+  send: (value: {
+    type: string;
+    filter?: {
+      geometry: Geometry | null;
+      name: string;
+    };
+  }) => void;
+};
+
+export default function StreetAddress({ send }: StreetAddressProps) {
+  const [sherlockConfig, setSherlockConfig] = useState(null);
+  const [address, setAddress] = useState(null);
+  const [bufferGeometry, setBufferGeometry] = useState(null);
+
+  const { mapView } = useMap();
+
+  useEffect(() => {
+    const filter =
+      bufferGeometry && address
+        ? {
+            geometry: bufferGeometry,
+            name: `Street Address: ${address?.attributes?.Match_addr}`,
+          }
+        : {
+            geometry: null,
+            name: null,
+          };
+    send({ type: 'SET_FILTER', filter });
+  }, [address, bufferGeometry, send]);
+
+  const graphicsLayer = useRef<GraphicsLayer | null>(null);
+  useEffect(() => {
+    if (!mapView) return;
+
+    graphicsLayer.current = new GraphicsLayer();
+    mapView.map.add(graphicsLayer.current);
+
+    return () => {
+      if (graphicsLayer.current) {
+        mapView.map.remove(graphicsLayer.current);
+      }
+    };
+  }, [mapView]);
+
+  useEffect(() => {
+    const provider = new LocatorSuggestProvider(
+      appConfig.urls.masquerade,
+      3857,
+    );
+    setSherlockConfig({
+      placeHolder: 'street address, city or zip',
+      onSherlockMatch: (features) => {
+        graphicsLayer.current.removeAll();
+        graphicsLayer.current.add(features[0]);
+        setAddress(features[0]);
+      },
+      provider,
+      maxResultsToDisplay: 10,
+      symbols: {
+        point: {
+          type: 'simple-marker',
+          style: 'circle',
+          color: [255, 55, 55],
+          size: 5,
+        },
+      },
+    });
+  }, [setSherlockConfig]);
+
+  return (
+    <>
+      <Buffer onChange={setBufferGeometry} inputGeometry={address?.geometry} />
+      {sherlockConfig && <Sherlock {...sherlockConfig} />}
+      {/* buffer to make sure user can scroll far enough to see the entire select filter type dropdown */}
+      <div className="h-28" />
+    </>
+  );
+}