Adding content into CallOut in SPFX react webpart

I want to add the content into my CallOut in my SPFX react webpart The look and feel should be similar to below.

My Code:

<div id="icon1"  className={styles2.IconArea} ref={menuButton1 => (this._menuButtonElement = menuButton1)}><Icon  iconName='Info' onClick={e => this._onShowMenuClicked(e.currentTarget.title)} title="icon1"/></div> 
 {this.state.isCalloutVisible && (<Callout
            className={styles2.callout}
            ariaLabelledBy={this._labelId}
            ariaDescribedBy={this._descriptionId}
            role="alertdialog"
            gapSpace={0}
            directionalHint={DirectionalHint.rightCenter}
            target={this._menuButtonElement}
            onDismiss={this._onCalloutDismiss}
            setInitialFocus={true}><div className={styles2.header}><p className={styles2.title} id={this._labelId}>
                {this.state.calloutTitle}</p></div><div className={styles2.inner}><p className={styles2.subtext} id={this._descriptionId}>
                {this.state.calloutContent}</p><p className={styles2.subtext} id={this._descriptionId}>
                {this.state.calloutContent}</p><div className={styles2.actions}>         <div dangerouslySetInnerHTML={{__html: this.state.calloutLink}} /></div></div></Callout>
        )}    

private _onShowMenuClicked= (title:any): void =>{
  this._menuButtonElement=document.getElementById(title);
    this.setState({
      isCalloutVisible: !this.state.isCalloutVisible,
      calloutTitle:"My CallOut 1",
      calloutContent:"<b>My CallOut Content 1</b> ",
      calloutLink:"<a href='http://bing.com'>Go to Bing1</a>",
    });
  };