<FormattedMessage /> возвращает строку без тегов

Потерпите меня, я не знаю, как объяснить эту проблему.

Я использую Bootstrap Table для отображения своих данных, у меня есть searchFilters, сортировка и многие другие функции в таблице.

Когда я начал реализовывать интернационализацию, я начал с форматирования непосредственно в текстовом компоненте, когда у меня появилось слишком много столбцов и таблиц, я переместил имена столбцов во внешние файлы, которые читаются при необходимости. Мне также нужно было добавить динамический перевод, как вы можете видеть с помощью headerFormatter.

Проблема в том, что библиотека react-intl добавляет теги <span> при рендеринге, из-за чего другие теги <span> не работают должным образом.

const headerFormatter = (col, colIndex) => {
    return ( 
        <FormattedMessage id = {col.text} key = {colIndex} />
    );
}
//Column Example
{dataField: 'agentNo',text: 'AgentNo', headerFormatter: headerFormatter, filter: textFilter({defaultValue:''}), sort: true},

Есть ли способ заставить <FormattedMessage /> возвращать только string в этом сценарии?

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Отформатировано:

<span>Date</span>

Неформатированный:

AgentNo
<span class = "react-bootstrap-table-sort-order dropup"><span class = "caret"></span></span>

Этот <span> раздавлен <span><FormattedMessage />