Traverse jsx in variable, then render it by appending to ref

I have a variable containing jsx such as this:

const data = (
    <>
        <CustomComponentA>
            Lorem ipsum
        </CustomComponentA>
        <CustomComponentB>
            dolor sit amet,
        </CustomComponentB>
        <CustomComponentA>
            consectetur adipiscing elit
        </CustomComponentA>
    </>
);

I want to traverse the above data one element at a time, then render the elements as follows:

data.props.children.forEach(element => {
    myRef.current.append(element);
})

Problem:

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Answer

You could try to use renderToString before appending the element to turn it into HTML:

But before that, you will need to turn HTML String into an actual HTML object:

import { renderToString } from 'react-dom/server';

data.props.children.forEach(element => {
    const htmlObject = document.createElement("div");
    htmlObject.innerHTML = renderToString(element);

    myRef.current.append(htmlObject.firstChild);
})

Live working test:

Edit elastic-germain-kuvfr