Avatar Repeat Delay

Hello
I am using Heygen interactive avatar NextJS Demo.

I wanted to add an Intro after starting the session, but whenever I trigger the code the avatar start doing the gestures without sound, after gesture ends you will hear the text so they are not synced.

What to do in this case?

  const startSession = async () => {  
    sessionStarted.current = true;  
    setIsLoadingSession(true);  
    setCurrentLoadingStep(0);  
    if (!isUsingLangflow && language == "ar") {  
      setLanguage("en")  
    }  
    try {  
      const quota = await getHeygenRemainingQuota();  
      if (quota \< 26000) {  
        setDebug("Not enough quota");  
        return;  
      }  
      setCurrentLoadingStep(1);  
      const token = await fetchAccessToken();  
      setCurrentLoadingStep(2);  
      avatar.current = new StreamingAvatar({ token });

  avatar.current.on(StreamingEvents.AVATAR_START_TALKING, async () => {
    handleMicPermission(false);
    EndSessionAfterAmountOfTime(heygenTimeoutPlaceHolder);
  });

  avatar.current.on(StreamingEvents.AVATAR_TALKING_MESSAGE, (message) => {
    // setCaptionText((prev) => `${prev} ${message.detail.message}`);
    EndSessionAfterAmountOfTime(message.timeStamp + 1000 * 12);
  });

  avatar.current.on(StreamingEvents.AVATAR_STOP_TALKING, async () => {
    avatar.current?.startVoiceChat({ isInputAudioMuted: true });
    // handleMicPermission(true);
    setCaptionText("");
    EndSessionAfterAmountOfTime(heygenTimeoutPlaceHolder);
  });

  avatar.current.on(StreamingEvents.STREAM_READY, (event) => {
    setStream(event.detail);
    EndSessionAfterAmountOfTime(heygenTimeoutPlaceHolder);
  });

  avatar.current.on(StreamingEvents.USER_START, () => {
    console.log("User Started Talking");
    // handleInterrupt();
    setIsUserTalking(true);
    setCaptionText("");
  });

  avatar.current.on(StreamingEvents.USER_STOP, () => {
    setIsUserTalking(false);
  });

  avatar.current.on(StreamingEvents.STREAM_DISCONNECTED, async () => {
    await endSession();
  });
  setCurrentLoadingStep(3);
  const res = await avatar.current.createStartAvatar({
    avatarName: card.id,
    knowledgeId,
    quality: AvatarQuality.High,
    voice: {
      rate: 1.5,
      emotion: VoiceEmotion.EXCITED,
    },
    language,
    disableIdleTimeout: true,
  });
  setCurrentLoadingStep(4);
  await avatar.current?.startVoiceChat({ isInputAudioMuted: true });
  setData(res);
  setChatMode("voice_mode");
  setCurrentLoadingStep(5);
  await handleMicPermission(false);
  // await wait(1500);
  setDebug("");
  setCurrentLoadingStep(6);
  setStreamIsVideo(false);
  if (card.intro) {
    setTimeout(() => {

      handleSpeak(card.intro ?? "", "repeat")
    }, 3000);
  }

} catch (error) {
  console.error("StartSession Error:", error);
  setDebug(
    error instanceof Error ? error.message : "Failed to start the session"
  );
} finally {
  setIsLoadingSession(false);
}
}