Instead of P i want h2 tag, what is the solution for that

[DileepA-123]

import { TeachingBubble } from "@fluentui/react";
import { useClassNames } from "Components/Common/Tutorials/TutorialsContextStyle";
import { useFeatureFlagContext } from "Components/Contexts/FeatureFlagContext";
import { DEFAULT_ARIA_LIVE } from "Constants/A11y";
import { ILoggingContext } from "Constants/Logging";
import { STOP_TUTORIAL_BUTTON_CLICK } from "Constants/LoggingEventNames";
import { getTutorialCampaigns } from "Constants/TutorialCampaigns";
import { ITutorialsContext, Tutorial, TutorialIds } from "Constants/Tutorials";
import { SMOOTH_SCROLLING } from "Constants/UIConstants";
import i18next from "i18next";
import * as React from "react";
import { useLocation } from "react-router-dom";
import AppLogger from "Services/AppLogger";

const DefaultTutorialsContext: ITutorialsContext = {
setTutorialElement: () => undefined,
startTutorial: () => undefined,
stopTutorial: () => undefined
};

const TutorialsContext = React.createContext(DefaultTutorialsContext);

const findScrollContainer = (element?: HTMLElement): HTMLElement => {
if (!element || !element.parentElement) {
return document.body;
}

const { parentElement } = element;

if (parentElement.scrollHeight > parentElement.clientHeight) {
    return parentElement;
}

return findScrollContainer(parentElement);

};

export const useTutorials = (): ITutorialsContext => React.useContext(TutorialsContext);

export const TutorialsProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
const location = useLocation();
const featureFlags = useFeatureFlagContext();
const styles = useClassNames();
const [tutorials, setTutorials] = React.useState<Record<TutorialIds, Tutorial>>(getTutorialCampaigns(featureFlags));
const [currentStep, setCurrentStep] = React.useState(0);
const [currentTutorial, setCurrentTutorial] = React.useState<TutorialIds | null>(null);
const [stepsInViewport, setStepsInViewport] = React.useState<Record<number, boolean>>({});
const isScrollingDisabled = React.useMemo(
() => tutorials[currentTutorial]?.disableScrolling,
[tutorials, currentTutorial]
);
const isStepsInViewportDisabled = React.useMemo(
() => tutorials[currentTutorial]?.disableStepsInViewport,
[tutorials, currentTutorial]
);
const visibleTutorial: Tutorial = React.useMemo(
() =>
Object.fromEntries(
Object.entries(tutorials[currentTutorial] || {})
.filter(([, { elementRef }]) => Boolean(elementRef))
.map(([, step], index) => [index, step])
),
[currentTutorial, tutorials]
);
/* With the use of feature flags to hide some tutorial steps, the viewport steps
may no longer be in increments of one (ex. 0, 2, 3, 4 -> step 1 is not flighted).
This lookup table will serve as a mapping from the current step to the actual
next/previous viewport tutorial step that is available. Index in the lookup
table will equal the current step of the tutorial.
*/
const currentStepToViewPortStepLookup: number[] = React.useMemo(() => {
const lookup = Object.keys(tutorials[currentTutorial] || {})
.filter((key) => !Number.isNaN(key))
.map((key) => parseInt(key, 10));

    return lookup;
}, [currentTutorial, tutorials]);
const [currentTarget, setCurrentTarget] = React.useState<DOMRect>();
const visibleStep = visibleTutorial[currentStep];
const currentStepCount = React.useMemo(() => Object.keys(visibleTutorial).length, [visibleTutorial]);
const changeStep = React.useCallback(
    (stepChange: number) =>
        setCurrentStep((currentCurrentStep) => {
            const newStep = currentCurrentStep + stepChange;
            AppLogger.logClick({
                eventName: stepChange > 0 ? "NextTutorialButtonClick" : "PreviousTutorialButtonClick",
                context: visibleTutorial[currentCurrentStep].loggingContext,
                message: `From ${currentCurrentStep} to ${newStep}`
            });
            if (!isScrollingDisabled) {
                visibleTutorial[newStep]?.elementRef?.current?.scrollIntoView({ behavior: SMOOTH_SCROLLING });
            }
            return newStep;
        }),
    [visibleTutorial, isScrollingDisabled]
);
const startTutorial = React.useCallback((id: TutorialIds) => {
    setCurrentStep(0);
    setCurrentTutorial(id);
    setCurrentTarget(undefined);
}, []);
const stopTutorial = React.useCallback(() => setCurrentTutorial(null), []);
const nextButtonProps = React.useMemo(() => {
    const isLastStep = currentStep === currentStepCount - 1;

    return {
        children: (
            <div className={styles.secondaryButtonText}>
                {isLastStep ? i18next.t("Generic.Done") : i18next.t("Generic.Next")}
            </div>
        ),
        onClick: isLastStep ? stopTutorial : () => changeStep(1)
    };
}, [changeStep, currentStep, currentStepCount, stopTutorial]);
const previousButtonProps = React.useMemo(
    () => ({
        children: i18next.t("Generic.Previous"),
        onClick: () => changeStep(-1)
    }),
    [changeStep]
);
const setTutorialElement = React.useCallback(
    (
        id: TutorialIds,
        step: number,
        elementRef: React.MutableRefObject<HTMLDivElement>,
        loggingContext: ILoggingContext
    ) =>
        setTutorials((currentTutorials) => {
            const tutorialStep = currentTutorials[id]?.[step];
            if (tutorialStep) {
                if (tutorialStep.elementRef !== elementRef && !!elementRef?.current) {
                    new IntersectionObserver(([{ intersectionRatio }]) =>
                        setStepsInViewport((currentStepsInViewport) => ({
                            ...currentStepsInViewport,
                            [step]: intersectionRatio > 0
                        }))
                    ).observe(elementRef.current);

                    tutorialStep.elementRef = elementRef;
                }
                tutorialStep.loggingContext = loggingContext;
            }

            return { ...currentTutorials };
        }),
    []
);

React.useEffect(() => {
    stopTutorial();
}, [location, stopTutorial]);

React.useEffect(() => {
    const scrollHandler = () => setCurrentTarget(visibleStep?.elementRef?.current?.getBoundingClientRect());
    const scrollContainer = findScrollContainer(visibleStep?.elementRef?.current);

    scrollContainer.addEventListener("scroll", scrollHandler);

    return () => scrollContainer.removeEventListener("scroll", scrollHandler);
}, [visibleStep?.elementRef]);

return (
    <TutorialsContext.Provider value={{ setTutorialElement, startTutorial, stopTutorial }}>
        {visibleStep && (
            <TeachingBubble
                calloutProps={{
                    "aria-live": DEFAULT_ARIA_LIVE,
                    hidden: isStepsInViewportDisabled
                        ? !isStepsInViewportDisabled
                        : !stepsInViewport[currentStepToViewPortStepLookup[currentStep]],
                    preventDismissOnScroll: true
                }}
                closeButtonAriaLabel={i18next.t("Generic.Close")}
                focusTrapZoneProps={{
                    enableAriaHiddenSiblings: true
                }}
                footerContent={
                    currentStepCount > 1
                        ? i18next.t("Generic.StepNavInfo", {
                              stepPosition: currentStep + 1,
                              stepCount: currentStepCount
                          })
                        : null
                }
                header ={visibleStep.title}
                onDismiss={() => {
                    stopTutorial();
                    AppLogger.logClick({
                        eventName: STOP_TUTORIAL_BUTTON_CLICK,
                        context: visibleTutorial[currentStep].loggingContext,
                        message: `Closing a ${currentStep}`
                    });
                }}
                primaryButtonProps={currentStep > 0 ? previousButtonProps : undefined}
                secondaryButtonProps={nextButtonProps}
                styles={{
                    primaryButton: styles.primaryButton,
                    secondaryButton: styles.secondaryButton,
                    body: styles.body
                }}
                target={visibleStep.elementRef?.current || currentTarget}
                hasCloseButton
            >
                {visibleStep.text}
            </TeachingBubble>
        )}
        {children}
    </TutorialsContext.Provider>
);

};

in header ={visibleStep.title} i am passing totle in output it is coming as P i want h2