got Bin page to render with BinTour not giving errors but the tour doesn't actually happen

src/bin/BinTour.tsx

@@ -1,17 +1,17 @@
-import { Typography } from "@material-ui/core";
+// import { useAuth0 } from "@auth0/auth0-react";
+import { Typography } from "@mui/material";
 import Tour from "common/Tour";
 import { random } from "lodash";
 import moment from "moment";
-import { useAuth, useGlobalState, useSnackbar, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import React, { useEffect, useState } from "react";
-import Emoji from "react-emoji-render";
 import { Step } from "react-joyride";
+// import Emoji from "react-emoji-render";
 
-interface Props {}
-
-export default function BinTour(props: Props) {
-  const { userID } = useAuth();
+export default function BinTour() {
+  // const { userID } = useAuth0();
   const [{ user }, dispatch] = useGlobalState();
+  const userID = user.id()
   const { error } = useSnackbar();
   const [isTourRunning, setIsTourRunning] = useState(true);
   const [joyKey, setJoyKey] = useState(random());
@@ -40,15 +40,15 @@ export default function BinTour(props: Props) {
       {
         title: (
           <React.Fragment>
-            Welcome to Bin Management
-            <Emoji text=" 🎉" />
+            Welcome to Bin Management 🎉
+            {/* <Emoji text=" 🎉" /> */}
           </React.Fragment>
         ),
         content: (
           <React.Fragment>
             <Typography variant="subtitle2" gutterBottom>
-              {"Hello " + user.name()}
-              <Emoji text=" 👋" />
+              {"Hello " + user.name() + " 👋"}
+              {/* <Emoji text=" 👋" /> */}
             </Typography>
             <Typography variant="body2" paragraph>
               Looks like this is your first time using our bin management system! Let me show you
@@ -138,12 +138,12 @@ export default function BinTour(props: Props) {
             <ul>
               <li>Storage mode: default</li>
               <li>
-                Drying mode: use heat to dry grain
-                <Emoji text=" ☀️" />
+                Drying mode: use heat to dry grain ☀️
+                {/* <Emoji text=" ☀️" /> */}
               </li>
               <li>
-                Cooldown mode: use fans to hold bin temperature lower
-                <Emoji text="  ❆❅" />
+                Cooldown mode: use fans to hold bin temperature lower  ❆❅
+                {/* <Emoji text="  ❆❅" /> */}
               </li>
             </ul>
           </React.Fragment>
@@ -156,6 +156,8 @@ export default function BinTour(props: Props) {
     return steps;
   };
 
+  console.log(user.status.finishedBinIntro)
+
   // if this intro has been done, return null
   if (user.status.finishedBinIntro.length > 1) return null;