I’m calling two Icons for download with two different label messages: Consumer Cibil and Commercial Cibil.

 <IconButtonUI to="#" icon='icon-download' label='Commercial Cibil' onClick={onDpdDownloadClick}/>
<IconButtonUI icon='icon-download' className='g_m_right_100' label='Consumer Cibil' onClick={onConsumerDpdDownloadClick} />

Here is the inside look of IconButtonUI:

const IconButtonUI = ({messageList, icon, selected, onClick, labelKey, label, shortCutKey}) =>
  <div className={`w_icon_btn icon ${icon} ${selected ? 'selected' : ''}`} onClick={onClick}
    data-tip data-for={`t-${icon}`}>
    {
      (label || labelKey) &&
      <ReactTooltip id={`t-${icon}`}>
        <MessageUI messageList={messageList} messageKey={labelKey} label={label} />
        {
          shortCutKey &&
          <React.Fragment>
            <br/>[<MessageUI messageList={messageList} messageKey={shortCutKey} />]
          </React.Fragment>
        }
      </ReactTooltip>
    }
  </div>

export default IconButtonUI

In UI, label text is overlapping:
enter image description here

How can I fix this bug?