sharepoint online – Error Cannot read property ‘isTeachingBubbleVisibleNext’ of undefined

Hi i am writing below code for two teaching bubble my first one is working fine but another one throing below error

Cannot read property 'isTeachingBubbleVisibleNext' of undefined on click it showing below line 

TeachingBubbleBasicExampleHealth.prototype._onDismissNext = function (ev) {
    this.setState({
        isTeachingBubbleVisibleNext: !this.state.isTeachingBubbleVisibleNext
    });
};

Full Code

import * as React from 'react';
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { ITravelBriefProps } from './ITravelBriefProps';
import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
import { useBoolean } from '@uifabric/react-hooks';
import styles from './TravelBrief.module.scss';
import {
  getTheme,
  mergeStyleSets, 
  FontWeights,
  ContextualMenu,
  Toggle,
  //DefaultButton,
  Modal,
  IDragOptions,
  IconButton,
  IIconProps,ITeachingBubbleProps
} from 'office-ui-fabric-react';
import { PropertyPaneSlider } from '@microsoft/sp-property-pane';
import { forwardRef, useImperativeHandle, useState } from 'react';
export interface ITeachingBubbleBasicExampleHealthState {
  isTeachingBubbleVisible?: boolean;
  isTeachingBubbleVisibleNext?: boolean
}
const iconButtonStyles = {
  alignItems: 'normal',
  root: {
    color: '#dd1d21',
    marginLeft: 'auto',
    marginTop: '2px',
    marginRight: '2px',
    
    
  },
  rootHovered: {
    color: '#dd1d21',
  },
};

const Health: IIconProps = { iconName: 'Health' };
export class TeachingBubbleBasicExampleHealth extends React.Component<{}, ITeachingBubbleBasicExampleHealthState> {
  private _menuButtonElement: HTMLElement;
  private _menuButtonElementNext: HTMLElement;

  constructor(props: {}) {
    super(props);

    this._onDismiss = this._onDismiss.bind(this);

    this.state = {
      isTeachingBubbleVisible: false,
      isTeachingBubbleVisibleNext: false

    };
  }

  public render(): JSX.Element {
    const { isTeachingBubbleVisible } = this.state;
    const { isTeachingBubbleVisibleNext } = this.state;
    const examplePrimaryButton: IButtonProps = {
      children: 'Try it out'
    };
    const exampleSecondaryButtonProps: IButtonProps = {
      children: 'Maybe later',
      onClick: this._onDismiss
    };

    return (
      <div className="ms-TeachingBubbleExample"> 
        <span className="ms-TeachingBubbleBasicExampleHealth-buttonArea" ref={menuButton => (this._menuButtonElement = menuButton!)}>
        <IconButton
            styles={iconButtonStyles}
            iconProps={Health}
            //ariaLabel="Close popup modal"
            onClick={this._onDismiss} 
           />
        <label className={styles.label1} onClick={this._onDismiss} >Click Here for Medical Emergency Contact First</label>
          {/* <DefaultButton onClick={this._onDismiss} text={isTeachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'} /> */}
        </span>
        {isTeachingBubbleVisible ? (
          <div>
            <TeachingBubble
              targetElement={this._menuButtonElement}
              //primaryButtonProps={examplePrimaryButton}
              //secondaryButtonProps={exampleSecondaryButtonProps}
              onDismiss={this._onDismiss}
              headline=""
            >
             
             <ul><li className={styles.label}>Content: Test1.
        </li> </ul>

            </TeachingBubble>
          </div>
        ) : null}
        <span className="ms-TeachingBubbleBasicExampleHealthNext-buttonArea" ref={menuButtonNext => (this._menuButtonElementNext = menuButtonNext!)}>
        <IconButton
            styles={iconButtonStyles}
            iconProps={Health}
            //ariaLabel="Close popup modal"
            onClick={this._onDismissNext} 
           />
        <label className={styles.label1} onClick={this._onDismissNext} >Click Here for Medical Emergency Contact 2</label>
          {/* <DefaultButton onClick={this._onDismiss} text={isTeachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'} /> */}
        </span>
        {isTeachingBubbleVisibleNext ? (
          <div>
            <TeachingBubble
              targetElement={this._menuButtonElementNext}
              //primaryButtonProps={examplePrimaryButton}
              //secondaryButtonProps={exampleSecondaryButtonProps}
              onDismiss={this._onDismissNext}
              headline=""
            >
             
             <ul><li className={styles.label}>Content: Test2
        </li> </ul>

            </TeachingBubble>
          </div>
        ) : null}
     
      </div>
      
      
    );
  }

  private _onDismiss(ev: any): void {
    this.setState({
      isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
      
     
    });
  }

  private _onDismissNext(ev: any): void {
    this.setState({
      isTeachingBubbleVisibleNext: !this.state.isTeachingBubbleVisibleNext
    });
  }
}