My project flow is i am redirecting to company-profile component and want to start react-joyride -> highlight sidebar Company and on next -> highlight Company Profile component for create button and on next -> again highlight -> Sidebar jobs -> redirect to jobs on next and highlight create jobs and on next -> sidebar candidates on next -> redirect to candidates component and hightlight view table here. How to achieve such a feature ?

I am not able to highlight create company on next even though i had put className as mentioned in the target

"use client";
import { useRouter } from "next/navigation";
import { createContext, useContext, useState } from "react";
import Joyride, { CallBackProps, Step } from "react-joyride";

interface JoyrideContextProps {
    run: boolean;
    steps: Step[];
    currentStep: number;
    setRun: (run: boolean) => void;
    setCurrentStep: (step: number) => void;
}

const JoyrideContext = createContext<JoyrideContextProps | undefined>(undefined);

export const useJoyride = () => {
    const context = useContext(JoyrideContext);
    if (!context) {
        throw new Error("useJoyride must be used within a JoyrideProvider");
    }
    return context;
};

export const JoyrideProvider = ({ children }: { children: React.ReactNode }) => {
    const [run, setRun] = useState(true);
    const [currentStep, setCurrentStep] = useState(0);

    const router = useRouter();

    const steps: Step[] = [
        { target: ".sidebar-company", content: "This is the Company section." },
        { target: ".create-company-button", content: "Create a new company." },
        { target: ".sidebar-jobs", content: "This is the Job section." },
        { target: ".create-job-button", content: "Create a new job." },
        { target: ".sidebar-candidates", content: "This is the Candidate section." },
        { target: ".view-candidate-list", content: "View candidate list here." },
        { target: ".sidebar-pricing", content: "This is the Pricing section." },
        { target: ".pricing-cards", content: "These are pricing cards." },
        { target: ".sidebar-content", content: "This is the Content section." },
        { target: ".child-content", content: "This is the content section." },
    ];

    const handleJoyrideCallback = (data: CallBackProps) => {
        const { index, action, status } = data;

        console.log("Joyride Callback: ", data);

        if (status === "finished" || status === "skipped") {
            setRun(false);
        } else if (action === "next") {
            setCurrentStep(index + 1);
        } else if (action === "prev") {
            setCurrentStep(index - 1);
        }
    };


    return (
        <JoyrideContext.Provider
            value={{ run, steps, currentStep, setRun, setCurrentStep }}
        >
            {children}
            {run && (
                <Joyride
                    callback={handleJoyrideCallback}
                    steps={steps}
                    continuous={true}
                    run={run}
                    stepIndex={currentStep}
                    showSkipButton={true}
                    showProgress={true}

                    styles={{
                        options: {
                            zIndex: 1000,
                        },
                    }}
                />
            )}
        </JoyrideContext.Provider>
    );
};

import { Spinner } from "@/components/CommonComponents";
import Header from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar";
import type { Metadata } from "next";
import { ScrollArea } from "@/components/ui/scroll-area";
import { JoyrideProvider } from "@/components/layout/joyride-provider";

export const metadata: Metadata = {
  title: "Nexby.ai",
  description: "Nexby",
};

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <div className="flex flex-col h-screen">
      <Header />
      <div className="flex flex-1 overflow-hidden">
        <JoyrideProvider>
          <Sidebar />
          <main className="flex-1 flex flex-col overflow-hidden">
            <div className="flex-1 overflow-auto">
              {children}
            </div>
          </main>
        </JoyrideProvider>
      </div>
    </div>
  );
}

export let navItems: NavItem[] = [
  {
    title: "Dashboard",
    href: "/dashboard",
    icon: "dashboard",
    label: "Dashboard",
  },
  {
    title: "Company Profile",
    href: "/dashboard/company",
    icon: "profile",
    label: "Company",
    className: "sidebar-company"

  },
  {
    title: "Jobs",
    href: "/dashboard/jobs",
    icon: "jobs",
    label: "Jobs",
    className: "sidebar-jobs"
  },
  {
    title: "Candidates",
    href: "/dashboard/candidates",
    icon: "candidate",
    label: "Candidates",
    className: "sidebar-candidates"
  },
  {
    title: "Pricing",
    href: "/dashboard/pricing",
    icon: "token",
    label: "Tokens",
    className: "sidebar-pricing"
  },
  {
    title: "Support",
    href: "/dashboard/support",
    icon: "support",
    label: "Support",
  },
  {
    title: "Content",
    href: "/dashboard/content",
    icon: "media",
    label: "Support",
    className: "sidebar-content"
  },
  {
    title: "User Manual",
    href: "goat",
    icon: "userManual",
    label: "User Manual",
    external: true,
  },


];