fix: update access token management with useEffect

Recommended setup was violating React rule of never accessing ref during render

Author: dpkass

npm-packages/docs/docs/auth/authkit/index.mdx

@@ -438,7 +438,7 @@ Next.js app with Convex. If not follow the
     ```tsx title="components/ConvexClientProvider.tsx"
     'use client';
 
-    import { ReactNode, useCallback, useRef } from 'react';
+    import { ReactNode, useCallback, useEffect, useRef } from 'react';
     import { ConvexReactClient } from 'convex/react';
     import { ConvexProviderWithAuth } from 'convex/react';
     import { AuthKitProvider, useAuth, useAccessToken } from '@workos-inc/authkit-nextjs/components';
@@ -462,9 +462,11 @@ Next.js app with Convex. If not follow the
       const authenticated = !!user && !!accessToken && !loading;
 
       const stableAccessToken = useRef<string | null>(null);
-      if (accessToken && !tokenError) {
-        stableAccessToken.current = accessToken;
-      }
+      useEffect(() => {
+        if (accessToken && !tokenError) {
+          stableAccessToken.current = accessToken;
+        }
+      }, [accessToken, tokenError]);
 
       const fetchAccessToken = useCallback(async () => {
         if (stableAccessToken.current && !tokenError) {