() => {
    const [isTourEnabled, setIsTourEnabled] = useState(false);
    const myFirstTour = {
      tourId: 'myFirstTour',
      advanceButtonText: 'Next',
      backButtonText: 'Back',
      endButtonText: 'Okay',
      enabled: isTourEnabled,
      onDismiss: () => setIsTourEnabled(false),
      onEnd: () => setIsTourEnabled(false),
      dismissAltText: '',
      checkpoints: [
        {
          advanceButtonText: 'Onward', // Override the default advanceButtonText above
          body: "Here's the first checkpoint!",
          placement: 'top',
          target: '#checkpoint-1',
          title: 'First checkpoint',
          dismissAltText: '',
        },
        {
          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',
          backButtonText: 'Rewind', 
        },
        {
          body: "The third checkpoint without a title",
          placement: 'bottom',
          target: '#checkpoint-3',
          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>
      </>
    );
}