Multiple tours in the same component

[renatomserra]

Hello

I have my provider on an app level. Then i have certain views where i got conditional tours based on user or current stage of their journey. Im trying to do like

  const emptyVaccineGuide = useTourGuideController('empty_vaccine_guide');
  const vaccineScheduleGuide = useTourGuideController('vaccine_schedule_guide');

  useEffect(() => {
    console.log(emptyVaccineGuide.canStart);
    if (
      emptyVaccineGuide.canStart &&
      showEmptyGuide &&
      !listType
    ) {
      emptyVaccineGuide.start();
    }
  }, [emptyVaccineGuide.canStart]); 

  useEffect(() => {
    if (
      vaccineScheduleGuide.canStart &&
      listType
    ) {
      vaccineScheduleGuide.start();
    }
  }, [vaccineScheduleGuide.canStart]);

// and then elements like
          <TourGuideZone
          zone={1}
          text={
            '💉 bla bla'
          }
          tourKey={emptyVaccineGuide.tourKey}
          borderRadius={16}>
          <Toggle checked={listType} onChange={setlistType} />
        </TourGuideZone>

Doing this means neither of the Tours Run, if i do a single one, that tour will run

[renatomserra]

I've decided to place conditionals around, although the above approach would have been cleaner IMO