requestPermissions does not return a promise apparently

app/routes/_index.tsx

@@ -72,13 +72,16 @@ function LandingMessage({ isSupported }: { isSupported: boolean }) {
 }
 
 function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
-  const { subscribeToPush, requestPermission } = usePush()
+  const { subscribeToPush, requestPermission, canSendPush } = usePush()
-
-  return <button onClick={subscribe}>Enable notifications</button>
 
   async function subscribe() {
     console.log("Hey the thing was clicked wow")
-    await requestPermission()
+    requestPermission()
+  }
+
+  useEffect(() => {
+    if (!canSendPush) return
+
     subscribeToPush(
       urlB64ToUint8Array(applicationServerPublicKey) as any,
       (subscription) => {
@@ -94,7 +97,9 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
         document.appendChild(errorDiv)
       }
     )
-  }
+  }, [canSendPush])
+
+  return <button onClick={subscribe}>Enable notifications</button>
 }
 
 const applicationServerPublicKey =