Using Highlighter and TextRange with React

[MimmyJau]

Hi, apologies if this is a basic question. I've been banging my head against the wall on this and feel like I must be missing something straightforward.

I'm attempting to use Rangy and the Highlighter + TextRange modules in a React project that lets users serialize highlights and then later de-serialize them. It's the de-serialization part that is causing trouble.

Approaches for deserialization:

1. Manipulate DOM directly: This is an anti-pattern in React, and I eventually came across some issues where React's virtualDOM and the browser's actual DOM got out of sync, leading to some React-specific bugs.
2. Manipulate DOM object and pass as prop: The alternative is to have Rangy add the Highlights to a DOM object that's held as state and then pass it as an HTML string and via something like dangerouslySetInnerHTML. However, while this works with many of Rangy's functions, the TextRange library seems to require working with a DOM that's actually rendered in the window.
3. Don't use TextRange: I considered using textContent instead, but one feature I want is the ability to start serialization within a specified node. This is a parameter offered in many of TextRange's functions, but not available in Highlighter.serialize().

What am I missing? Is my understanding of the library incorrect? Thanks in advance.