use local storage hook

plugins/salesforce/src/pages/BusinessUnitId.tsx

@@ -1,25 +1,24 @@
+import { framer } from "framer-plugin"
+import { useState } from "react"
+import { useLocation } from "wouter"
+import { useLocalStorage } from "usehooks-ts"
 import { request } from "@/api"
 import { Button } from "@/components/Button"
 import { ExternalLink } from "@/components/Link"
 import { BUSINESS_UNIT_ID_KEY } from "@/constants"
-import { framer } from "framer-plugin"
-import { useState } from "react"
-import { useLocation } from "wouter"
 
 export default function BusinessUnitId() {
     const [, navigate] = useLocation()
     const [isLoading, setIsLoading] = useState(false)
-    const [unitId, setUnitId] = useState("")
+    const [unitId, setUnitId] = useLocalStorage(BUSINESS_UNIT_ID_KEY, "")
 
     const handleSkip = () => {
         // Empty string so we know we have at least been through this stage
-        localStorage.setItem(BUSINESS_UNIT_ID_KEY, "")
+        setUnitId("")
         navigate("/menu")
     }
 
     const handleAddBusinessUnit = async () => {
-        // Set Id here so request has access to it
-        localStorage.setItem(BUSINESS_UNIT_ID_KEY, unitId)
         setIsLoading(true)
 
         try {
@@ -38,7 +37,7 @@ export default function BusinessUnitId() {
             console.error(e)
             framer.notify("Invalid Business Unit Id", { variant: "error" })
             // Failed to validate it, set it back to empty string
-            localStorage.setItem(BUSINESS_UNIT_ID_KEY, "")
+            setUnitId("")
         } finally {
             setIsLoading(false)
         }