Могу ли я создать элемент React из строки HTML или узла/элемента dom

Я получаю строку HTML из SharePoint, и мне нужно проанализировать и изменить данные и создать элемент реакции, который будет отображаться в моем приложении реакции.

По сути, у меня есть код (в виде строки), возвращаемый мне в формате, похожем на:

"
<div>
    <div data-sp-canvasdataversion = "1">This could be a header</div>
    <div data-sp-canvasdataversion = "1"><img src = "titleimage.jpg"></div>
    <div data-sp-canvasdataversion = "1"><a href = "pdfLink.pdf">This is a link to a PDF</a></div>
</div>
"

и из этого мне нужно пройтись по дочерним элементам и создать новый элемент React, содержащий некоторые части того, что было возвращено, и некоторые новые части, такие как

<div>
    <div data-sp-canvasdataversion = "1">This could be a header</div>
    <div data-sp-canvasdataversion = "1"><img src = "titleimage.jpg"></div>
    <PDFViewer file = {""pdfLink.pdf""}></PDFViewer> 
</div>

Первоначально я использовал опасно SetInnerHTML, который работал, чтобы просто отображать данные, но теперь мне нужно удалить фрагмент html, создать элемент реакции на основе данных и ввести новый элемент обратно в код. Поскольку сейчас я пытаюсь вставить компонент, ванильный html не будет работать.

Я могу перебирать дочерние элементы, преобразовывая их в узел dom, но я не могу понять, как использовать узел или элемент dom в качестве дочернего элемента React Element.

Я пробовал:

let element = React.createElement('div', {}, HTMLString); 

let node = document.createRange().createContextualFragment(HTMLString).firstChild;

let element = React.createElement('div', {}, node); 

let node = document.createRange().createContextualFragment(HTMLString).firstChild;
let node2 = document.createElement("div");
node2.appendChild(node);
node2 = node2.firstElementChild as HTMLDivElement;

let element = React.createElement('div', {}, node2); 

Ни один из них не работает должным образом и не дает мне ошибку Objects are not valid as a React child (found: [object HTMLDivElement]). или аналогичную.

Мне нужно что-то вроде:

let element = React.createElement('div'); 
let node = document.createRange().createContextualFragment(HTMLString).firstChild;

node.childNodes.forEach(child => {
    if (...//child IS NOT pdf)
        element.appendChild(child)
    else if (...//child IS pdf){
        ...
        element.appendChild(<PDFViewer file = "linktopdf.pdf">)
    }
})

Тогда я ожидаю, что смогу использовать это в рендере.

render {
    ...
    return(
        <div className = "container">
            {element}
        </div>
    );
}

Пожалуйста, дайте мне знать, если это вообще возможно и как. Единственное возможное решение, которое я мог придумать, это, возможно, сохранить дочерние элементы в виде строк и использовать опасно SetInnerHTML для их генерации, но я действительно хочу уйти от использования опасно SetInnerHTML, особенно в таком виде.