fix console error with localstorage hook

components/ConnectWalletButton.tsx

@@ -28,9 +28,7 @@ const ConnectWalletButton = () => {
           <div>
             <span className="whitespace-nowrap">Connect Wallet</span>
             <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
-              {WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
-                ({ name }) => name
-              )}
+              {WALLET_PROVIDERS.find((p) => p.url === savedProviderUrl)?.name}
             </StyledWalletTypeLabel>
           </div>
         </div>

components/Tooltip.tsx

@@ -26,7 +26,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({
         </div>
       }
     >
-      <button className="outline-none focus:outline-none">{children}</button>
+      <div className="outline-none focus:outline-none">{children}</div>
     </Tippy>
   )
 }

components/UiLock.tsx

@@ -35,7 +35,7 @@ const UiLock = ({ className = '' }) => {
           content={uiLocked ? 'Unlock Layout' : 'Lock Layout'}
           className="text-xs py-1"
         >
-          <button
+          <div
             onClick={handleClick}
             className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
           >
@@ -44,7 +44,7 @@ const UiLock = ({ className = '' }) => {
             ) : (
               <LockOpenIcon className="w-5 h-5 animate-bounce" />
             )}
-          </button>
+          </div>
         </Tooltip>
       </div>
     </>

hooks/useLocalStorageState.tsx

@@ -9,7 +9,7 @@ export function useLocalStorageStringState(
   const state =
     typeof window !== 'undefined'
       ? localStorage.getItem(key) || defaultState
-      : ''
+      : defaultState || ''
 
   const [, notify] = useState(key + '\n' + state)