sharepoint online – open another teaching bubble on click of heading in Teaching bubble

i have created two teaching bubble , now i want that if user click one of the heading of First Teaching bubble it will open another teaching bubble , below are my teaching bubble 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, shouldWrapFocus
            } from 'office-ui-fabric-react';
            import { readyException } from 'jquery';
            import { TeachingBubbleBasicNext } from './Teaching copy';
            const iconButtonStyles = {
              alignItems: 'normal',
              root: {
                color: '#dd1d21',
                marginLeft: 'auto',
                marginTop: '2px',
                marginRight: '2px',
                
                
              },
              rootHovered: {
                color: '#dd1d21',
              },
            };

            const ArrowIcon: IIconProps = {  iconName: 'OfficeChat' };




            function show()

            {


            }

            const examplePrimaryButtonProps: IButtonProps = {
              
              children: 'Yes',
              onClick: function () {
                window.open("")
            }

            }

            const constheadline :ITeachingBubbleProps={

             headline:""

            }

            export const TeachingBubbleBasicExample: React.FunctionComponent = () =>{
              const (teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }) = useBoolean(false);
              
             

              const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
                () => ({
                  children: 'Maybe later',
                  onClick: toggleTeachingBubbleVisible
                  
                }),
                (toggleTeachingBubbleVisible),
                   
              );

               return (
                <div>
                  <div> <IconButton
                        styles={iconButtonStyles}
                        iconProps={ArrowIcon}
                        ariaLabel="Close popup modal"
                        onClick={toggleTeachingBubbleVisible}
                        id="targetButton"
                    text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
                      />  <label className={styles.label} onClick={toggleTeachingBubbleVisible} ></label> 
            </div>
            {/*       <DefaultButton
                    id="targetButton"
                    onClick={toggleTeachingBubbleVisible}
                    text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
                  /> */}

                  {teachingBubbleVisible && (
                      
                    <TeachingBubble
                      target="#targetButton"
                      // primaryButtonProps={examplePrimaryButtonProps}
                      // secondaryButtonProps={exampleSecondaryButtonProps}
                      onDismiss={toggleTeachingBubbleVisible}
                      
                    >
                   <ul>
                  <li className={styles.label}>  <a href="#" >get more info</a>. </li>

              </ul>

              

                    </TeachingBubble>

                    

                  )}

                </div>
              );
            };

second teaching bubble which should open on click of get more info

            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';
            const iconButtonStyles = {
              alignItems: 'normal',
              root: {
                color: '#dd1d21',
                marginLeft: 'auto',
                marginTop: '2px',
                marginRight: '2px',
                
                
              },
              rootHovered: {
                color: '#dd1d21',
              },
            };

            const ArrowIcon: IIconProps = {  iconName: 'OfficeChat' };

            interface ModernProps {
              pdata: number;
              }



            const examplePrimaryButtonProps: IButtonProps = {
              
              children: 'Yes',
              onClick: function () {
                location.href = "" 
            }

            }



            export const TeachingBubbleBasicNext: React.FunctionComponent <{country:any,rating:any}>= (country,rating)=> {
              const (teachingBubbleVisibleNext, { toggle: toggleteachingBubbleVisibleNext }) = useBoolean(false);


              const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
                () => ({
                  children: 'Maybe later',
                  onClick: toggleteachingBubbleVisibleNext,
                  test:""
                  
                }),
                (toggleteachingBubbleVisibleNext),
                   
              );


               return (
                <div className={styles.TeachingbubblePositing}>
                  <div> <IconButton
                        styles={iconButtonStyles}
                        iconProps={ArrowIcon}
                        ariaLabel="Close popup modal"
                        onClick={toggleteachingBubbleVisibleNext}
                        id="targetButtonNext"
                    text={teachingBubbleVisibleNext ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
                      />  <label className={styles.label} onClick={toggleteachingBubbleVisibleNext} ></label> 
            </div>
            {/*       <DefaultButton
                    id="targetButton"
                    onClick={toggleteachingBubbleVisibleNext}
                    text={teachingBubbleVisibleNext ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
                  /> */}

                  {teachingBubbleVisibleNext && (
                      
                    <TeachingBubble
                      target="#targetButtonNext"
                      // primaryButtonProps={examplePrimaryButtonProps}
                      // secondaryButtonProps={exampleSecondaryButtonProps}
                      onDismiss={toggleteachingBubbleVisibleNext}
                      
                    >
                   <ul>
                   <li className={styles.label}>some text goes here </li>
                  
             </ul>


              

                    </TeachingBubble>

                    

                  )}

                </div>
              );
                  
                
                
            };