diff --git a/frontend/frontend/src/axios-override.js b/frontend/frontend/src/axios-override.js
index 5826ab60..0aa716dd 100644
--- a/frontend/frontend/src/axios-override.js
+++ b/frontend/frontend/src/axios-override.js
@@ -1,6 +1,5 @@
 import axios from 'axios';
 import { setupCache } from 'axios-cache-interceptor';
-import { useSelector } from 'react-redux';
 import { HOST } from './constants';
 
 import additionalUserStars from './mockData/additional_user_stars.json' with { type: 'json' };
@@ -32,10 +31,16 @@ function createResolvedPromise(data, config) {
   });
 }
 
+// store userId outside React context so the interceptor can access it
+let userId = null;
+
+export function setUserId(newUserId) {
+  userId = newUserId;
+}
+
 // mock responses to unauthenticated "anuraghazra" requests
 cachedAxios.interceptors.request.use(
   (config) => {
-    const userId = useSelector((state) => state.user.userId);
     const isAuthenticated = userId && userId.length > 0;
     if (isAuthenticated) {
       return config;
diff --git a/frontend/frontend/src/components/Card/SVG.js b/frontend/frontend/src/components/Card/SVG.js
index 843ad5e8..9e59251e 100644
--- a/frontend/frontend/src/components/Card/SVG.js
+++ b/frontend/frontend/src/components/Card/SVG.js
@@ -11,6 +11,7 @@ import 'react-loading-skeleton/dist/skeleton.css';
 
 import { createMockReq, createMockRes } from '../../mock-http';
 import { default as router } from '../../backend/.vercel/output/functions/api.func/router.js';
+import { setUserId } from '../../axios-override';
 
 const SvgInline = (props) => {
   const [svg, setSvg] = useState(null);
@@ -20,6 +21,11 @@ const SvgInline = (props) => {
   const userId = useSelector((state) => state.user.userId);
   const { url } = props;
 
+  // provide userId to non-react code in axios-override.js
+  useEffect(() => {
+    setUserId(userId);
+  }, [userId]);
+
   useEffect(() => {
     const loadSvg = async () => {
       process.env.PAT_1 = userToken;