Hello guys I’m trying to make my react joyride accesible to a multiple routes where we show demo page then after the demon it returns back to original page. However, its good to a first 3 steps that targets the class/id then when the 4 steps came it jumps to 0 or 10 parth which is in the main page. I want to target demo route but its not working.

tried applying the basic, controlled, custom component but didn’t work.

jsx
const INITIAL_STEPS: Step[] = [
    {
        target: 'body',
        content: '0',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'center',
    },
    {
        target: '._container_olviv_1',
        content: '1',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'auto',

    },
    {
        target: '._container_olviv_1 ._box_olviv_18',
        content: '2',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'center',
        // spotlightClicks: true,

    },
    {
        // target: '._container_10dbq_65',
        target: '._container_zkz4b_69 > div ._day-list_zkz4b_111 ',
        content: '3',
        disableBeacon: true,
        disableOverlayClose: true,
        // spotlightClicks: true,
        placement: 'center'
    },


    {
        target: '._container_1owi2_1 > div:nth-of-type(1) button',
        content: '5',
        disableBeacon: true,
        disableOverlayClose: true,
        spotlightClicks: true,
        placement: 'auto'
    },

    {
        target: '._container_1n86c_1 ._upper-part_1n86c_28 ._status-badge_1n86c_65 > span',
        content: '6',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'bottom-end'
    },
    {
        target: '._container_1owi2_1 > div:nth-of-type(1) button',
        content: '7',
        disableBeacon: true,
        disableOverlayClose: true,
        spotlightClicks: true,
    },
    {
        target: '._container_1owi2_1 ul',
        content: '8',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'bottom'
    },
    {
        target: '._header_8qsd4_1 > div ._side-menu-container_8qsd4_73',
        content: '9',
        disableBeacon: true,
        disableOverlayClose: true,
        spotlightClicks: true,

    },
    {
        target: '._container_1tgjq_1',
        // target: '._container_1hztp_1 ._panel-container_1hztp_63._open_1hztp_75',
        content: '10',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'top-start'
    },
    {
        target: '._container_1hztp_1',
        content: '11',
        disableBeacon: true,
        disableOverlayClose: true,
        spotlightClicks: true,
    },
    {
        target: '._container_1hztp_1 ._panel_1hztp_63 > div > ul > li:nth-child(1)',
        content: '12',
        disableBeacon: true,
        placement: 'left-start',
        disableOverlayClose: true
    },
    {
        target: '._container_1hztp_1 ._panel_1hztp_63 > div > ul > li:nth-child(2)',
        content: 'These are frequently asked questions, and their answers.',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'right-start',
    },
    {
        target: '#support-slash-community-link',
        content: '13',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'right-start',
    },
    {
        target: '._accordion_u2i7m_1',
        content: '14',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'top-start',
    },
    {
        target: '._section_ssojg_1',
        content: '15',
        disableBeacon: true,
        disableOverlayClose: true,
        placement: 'center',
    },
    {
        target: "body",
        content: "16",
        placement: 'center',
        disableBeacon: true,
        disableOverlayClose: true,
        locale: {
            last: 'Close'
        }
    }
]

 const [showTourBtn, setShowTourBtn] = useState<boolean>(true)
    const [languageRun, setLanguageRun] = useState<boolean>(false)
    const [tourRun, setTourRun] = useState<boolean>(false)

const steps = useMemo<Step[]>(() => {
        if (languageRun)
            return LANGUAGE_STEP

        return INITIAL_STEPS.map((step, i) => ({
            ...step,
            content: joyride_labels[i] || '',
        }))
    }, [languageRun, tourRun, joyride_labels])

const handleCallback = (data: CallBackProps) => {
        if (data.step.target === '#change-language-btn') {
            if (data.action === 'skip') {
                setLanguageRun(false)
                localStorage.setItem("nxt_joyride", "done")
                localStorage.setItem("nxt_joyride_language", user.email || 'none')
            }
        } else if (data.step.target === '#tour-btn') {
            if (data.lifecycle === 'complete') {
                setLanguageRun(false)
                localStorage.setItem("nxt_joyride", "done")
                localStorage.setItem("nxt_joyride_language", user.email || 'none')
            }
        }


        if (data.action !== 'skip') {
            navigate({ to: '/home' })
        }

        if (data.action !== 'next' && data.action !== 'update' && data.action !== 'prev')
            return

        const target = data.step.target as string

        if (data.index + 1 === 6) {
            navigate({ to: '/demo/quizzes' })
            return
        }

        if (target === 'body') {
            localStorage.setItem("nxt_joyride", "done")
            navigate({ to: '/home' })
        }


        if (!target.includes('demo-home')) {
            navigate({ to: '/demo/home' })
            return
        }

        // if (!target.includes("link"))
        //     return


        // // if (target.includes("archive-link")) {
        // //     navigate({ to: '/library/1'  })
        // //     return
        // // }

        // // if (target.includes("applied-studies-link")) {
        // //     navigate({ to: '/library/4'  })
        // //     return
        // // }

        const link = target
            .replaceAll("#", "/")
            .replaceAll(".", "/")
            .replaceAll("-slash-", "/")
            .replaceAll("-link", "")

        if (pathname.includes(link))
            return

        navigate({ to: link, params: undefined as never })

    }