Calling destroy() on an already destroyed driver object destroys another driver object that is in active state.

[IdrisGit]

What I am trying to do

I have a React app where I want to highlight to the user that they can get a tour of the application by clicking on a button, however, I want to destroy the highlight either after 4secs of no interaction from the user's side or when the user closes the highlight or when they click on the button to start the tour.

Issue

To destroy the highlight after 4 seconds of inactivity I have a setTimeout that waits for 4000ms before calling the destroy method on the driver object I had created for the highlight. However, if the user clicks on the Start Tour button a new tour is created using another driver object that I had initialized, since the highlight object is already destroyed, the new tour is getting destroyed after 4 seconds.

Code and Demo

import React, { useState, useEffect, useMemo } from 'react';
import { driver, type DriveStep } from 'driver.js';
import 'driver.js/dist/driver.css';
import '@features/Topbar/components/driverjs.css';

const MainLayout: React.FC = () => { 
 const driverObjForDemo = useMemo(
    () =>
      driver({
        stagePadding: 6,
        stageRadius: 5,
        overlayColor: '#000000AA',
        overlayOpacity: 0.9,
        popoverClass: 'driverjs-theme',
      }),
    [],
  );

 const driverObj = useMemo(
    () =>
      driver({
        showProgress: true,
        stagePadding: 6,
        stageRadius: 5,
        overlayColor: '#000000AA',
        overlayOpacity: 0.9,
        popoverClass: 'driverjs-theme',
      }),
    [],
  );

  useEffect(() => {
    if (hash && hash === '#demo') {
      // * Show highlight to let user know they can get a tour when visiting using demo link.
      driverObjForDemo.highlight({
        element: '#start-tour-button',
        popover: {
          description: 'You can get a brief tour of the app by clicking here.',
          side: 'bottom',
          align: 'end',
        },
      });

      // * Destroy highlight in 4sec if there is no user interaction.
      setTimeout(() => {
        if (driverObjForDemo && driverObjForDemo.isActive()) {
          // ? Tour with object (driverObj) is being destroyed after 4 seconds if user chooses to start the tour from highlight
          driverObjForDemo.destroy();
        }
      }, 4000);
    }
  }, [hash, driverObjForDemo]);

  const handleStartTour = () => {
    // * Destroy highlights if the user clicks on the Start Tour button or else it will stay open.
    if (driverObjForDemo && driverObjForDemo.isActive()) {
      driverObjForDemo.destroy();
    }

    const baseSteps: DriveStep[] = [ ..listOfBaseSteps ];

    // * Tour for mobile devices.
    if (breakpoint === ('base' || 'sm')) {
      const mobileDrawerStep: DriveStep = {...stepForMobileOnly};
      driverObj.setSteps([mobileDrawerStep, ...baseSteps]);
    } else {
      // * Tour for devices larger than mobile.
      driverObj.setSteps(baseSteps);
    }

    driverObj.drive();
  };
}

driverjsbug.mp4