Tour guide does not target item placed inside mui dialog

I am create a tour guide, I have a modal which is created on top mui dialog, when the modal is opened, it does not target the item correctly. below is my code
const [state, setState] = useState<{
        run: boolean;
        step: Step[];
        stepIndex: number;
    }>({
        run: true,
        step: [],
        stepIndex: 0,
    });
    const { run, step, stepIndex } = state;

    useMount(() => {
        setState({
            run: true,
            stepIndex: 0,
            step: [
                {
                    title: "Welcome to the page tour",
                    content: "Let's begin our journey",
                    locale: {
                        skip: <SkipButton />,
                        next: <NextButton />,
                        back: <PrevButton />,
                    },
                    placement: "center",
                    target: "body",
                },
                {
                    content: "You can switch between multiple websites, if you have more than one.",
                    target: ".site-selector",
                    title: "Your website name",
                },
                {
                    content: "Services integrated to your websites shows here",
                    title: "Here are your hives",
                    target: createTarget(tourSelectors.HIVES),
                    placement: "right-start",
                },
                {
                    title: "Create your first Page",
                    content: "Start by creating a unique page for your website",
                    target: createTarget(tourSelectors.CREATE_PAGE),
                    spotlightClicks: true,
                    disableBeacon: true,
                },
                {
                    title: "Select a page",
                    content: "Select a template to create your page with.",
                    target: ".select-page",
                    spotlightClicks: true,
                    disableBeacon: true,
                    placement: "right",
                    styles: {
                        options: {
                            zIndex: 10000,
                        },
                    },
                    isFixed: true,
                },
                {
                    title: "Select a page",
                    content: "Select a template to create your page with.",
                    target: ".select-page",
                    spotlightClicks: true,
                    disableBeacon: true,
                    placement: "right",
                    styles: {
                        options: {
                            zIndex: 10000,
                        },
                    },
                    isFixed: true,
                },
            ],
        });
    });
    useEffect(() => {
        if (form?.create_page_modal_open) {
            setState({ ...state, run: false, stepIndex: 4 });
            setTimeout(() => {
                setState({ ...state, run: true });
            }, 400);
        }
    }, [form]);

    const handleJoyRideCallback = (data: CallBackProps) => {
        const { action, index, status, type } = data;
        const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
        console.log(index);

        if (type === EVENTS.STEP_AFTER && index === 0 && modalOpen) {
            // After the first step and modal is open, move to the modal content step
            setState({ ...state, run: true, stepIndex: 4 });
            return;
        }
        if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
            // Need to set our running state to false, so we can restart if we click start again.
            // setState({ run: false, stepIndex: 0 });
            setState({ ...state, run: false });
        } else if (([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)) {
            console.log(nextStepIndex);
            setState({ ...state, stepIndex: nextStepIndex });

        }
    };

    <Joyride
                continuous
                callback={handleJoyRideCallback}
                run={run}
                steps={step}
                hideCloseButton
                scrollToFirstStep
                showSkipButton
                showProgress={false}
                tooltipComponent={Tooltip}
                disableOverlayClose={false}
                disableCloseOnEsc
                stepIndex={stepIndex}
            />
![Uploading Screenshot 2024-06-13 171705.png…]()
gilbarbara / react-joyride

Tour guide does not target item placed inside mui dialog #1040
