Check if user has seen/used the tour

[RafGarLo]

Hi. I am having trouble implementing the part from the title. The code is supposed to check if users have already seen the joyride tour, but it runs after every page refresh. I thought that in my useEffect, but clearly I am doing something wrong. This is my code. Could you point me in the correct direction?

import React from 'react';
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import Joyride, { ACTIONS, CallBackProps, STATUS, Step } from 'react-joyride';

const joyrideStyles = {
options: {
primaryColor: '#0046CF',
arrowColor: '0046CF',
},
};

export default function UseTour(steps: Step[], localStorageKey: string | null): ReactNode {
const [run, setRun] = useState(false);

useEffect(
    function () {
        if (!localStorageKey) {
            setRun(true);
            return;
        }
        const tourViewed = window.localStorage.getItem(localStorageKey);
        if (tourViewed) {
            setRun(false);
        } else {
           window.localStorage.setItem(localStorageKey, '1');
            setRun(true); 
        }
        
    },
    [localStorageKey],
);

const handleJoyrideCallback = useCallback(function (data: CallBackProps) {
    if (data.action === ACTIONS.CLOSE) {
        setRun(false);
    }
    console.log('callback called', data);
   
}, []);

const tour = useMemo<ReactNode>(
    () => (
        <Joyride
            callback={handleJoyrideCallback}
            continuous={true}
            run={run}
            scrollToFirstStep={true}
            showSkipButton={false}
            steps={steps}
            styles={joyrideStyles}
        />
    ),
    [steps, handleJoyrideCallback, run],
);

return tour;

}