() => {
    const [isTourEnabled, setIsTourEnabled] = useState(false);
    const myFirstTour = {
      tourId: 'myFirstTour',
      advanceButtonText: 'Next',
      dismissButtonText: 'Dismiss',
      endButtonText: 'Okay',
      enabled: isTourEnabled,
      onDismiss: () => setIsTourEnabled(false),
      onEnd: () => setIsTourEnabled(false),
      checkpoints: [
        {
          advanceButtonText: 'Onward', // Override the default advanceButtonText above
          body: "Here's the first checkpoint!",
          placement: 'top',
          target: '#checkpoint-1',
          title: 'First checkpoint',
        },
        {
          body: "Here's the second checkpoint!",
          onDismiss: () => {
            console.log('Dismissed the second checkpoint');
            setIsTourEnabled(false);
          }, // Override the default onDismiss above
          placement: 'right',
          target: '#checkpoint-2',
          title: 'Second checkpoint',
        },
        {
          body: "Here's the third checkpoint!",
          placement: 'bottom',
          target: '#checkpoint-3',
          title: 'Third checkpoint',
          onEnd: () => {
            console.log('Ended the third checkpoint');
            setIsTourEnabled(false);
          } // Additional logic for the onEnd callback to be called on the last checkpoint
        }
      ],
    };

    return (
      <>
        <ProductTour
          tours={[myFirstTour]}
        />
        <Button onClick={() => setIsTourEnabled(true)}>Open a product tour</Button>
        <Row className="w-100 m-0 mt-3 p-2 justify-content-around">
          <div id="checkpoint-1"><Icon src={Check}/></div>
          <div id="checkpoint-2"><Icon src={Check}/></div>
          <div id="checkpoint-3"><Icon src={Check}/></div>
        </Row>
      </>
    );
}