Рендеринг компонента из уже существующей HTML-строки

Question

Я хочу реализовать создание компонента для уже подготовленной html-строки и стилизацию объекта с помощью React. У нас есть данные следующим образом:

const obj = {
    block1: '<div>TEST-1</div>',
    block2: '<div>TEST-2</div>',
};
const styling = {
    block1: { fontSize: '12px', color: '#123456' },
    block2: { fontSize: '18px', color: '#153426' },
};

В результате я хотел бы создать 2 блока:

<div style="font-size:12px; color:#123456;">TEST-1</div>
<div style="font-size:18px; color:#153426;">TEST-2</div>

Я уже попробовал 2 npm-модуля для реализации этой идеи (без стилизации):

• ReactHtmlParser - создает компонент из любой строки html
• JsxParser - может одновременно визуализировать компонент jsx +

Но я получаю ту же ошибку все время: Component.render (): должен быть возвращен действительный элемент React (или ноль). Возможно, вы вернули undefined, массив или другой недопустимый объект.

Мой рендер выглядит так:

render() {
    customBlock = getBlock(obj, styling); // markup objects
    return(
        <Component1 />
        { customBlock }
        <Component2 />
    );
}

Может быть, кто-то может помочь понять, почему компонент из функции getBlock возвращает что-то, что не может быть отображено?

getBlock = (block, styling) => {
    let markup = '';
    for (let element in block) {
        if (block[element]) {
            markup += block[element];
        }
    }
    return <JsxParser bindings={{}} components={{}} jsx={`${markup}`} />
    // OR
    // return ReactHtmlParser(markup);
}

P.S. другие компоненты являются обычными объектами {props ...}, но эти динамические компоненты имеют ту же структуру, но дополнительно покрыты объектом 'body' {body: {props ...}}. Поэтому ReactElement.isValidElement не может проверить свойство типа $$ объекта из-за этой оболочки 'body' = (