return popover element on dataFormat

[shorif2000]

I am trying to return popover using an overlay within dataFormat option and it does not seem to work.

serviceFormatter(cell, row) {
        let exemptionType = 'CM';
        if( (row.comms_matrix_id == null || row.comms_matrix_id == '0' ) && (row.service_id == null || row.service_id == 'All' || row.service_id == '0')){
            exemptionType = 'Global';
        }else if( (row.comms_matrix_id == null || row.comms_matrix_id == '0') && (row.service_id != null || row.service_id != 'All' || row.service_id != '0' )){
            exemptionType = 'Service';
        }

        let exemptionTypeText = row.service + `<span class="label label-info" style="float:right;vertical-align:top">${exemptionType}</span>`;

        if(cell && cell.length> 0){
            exemptionTypeText = row.service + `<span class="label label-info" style="float:right;vertical-align:top">${exemptionType}</span>`;
        }
        let popover = <Popover id={'popover_exemption_type'}>{exemptionType} exemption</Popover>
        return (
                <div><OverlayTrigger placement="top" trigger={['hover', 'focus']} overlay={popover}>{exemptionTypeText}</OverlayTrigger></div>
        );
    }

the error i get is

Uncaught Error: React.Children.only expected to receive a single React element child.