Draft.js Mention Plugin is not working after rendering contentState to the editor - draftjs

Question

I am using mentions with the draft.js (like this #yourname) and sending to the database to save and fetching it to render on the web page but things are not working as expected.
On Saving to the database ->
const contentState = editorState.getCurrentContent();
const currentStateData = convertToRaw(contentState);
const richStringifyValue = JSON.stringify(currentStateData);
// sending richStringifyValue to save in Mongo DB
On Fetch and set in editor ->
const [editorState, setEditorState] = React.useState(() => EditorState.createEmpty());
const parsedData = JSON.parse(post.contentStyled);
const fromRawData = convertFromRaw(parsedData );
EditorState.createWithContent(fromRawData);
// here is the view rendered part -
<Editor
readOnly={true}
editorState={editorState}
/>
But after setting in editor (after the data fetched from API) my mentions (#... #... #...) lost the CSS. What should we do?
On Using Edit ->
On fetch and setting again in Editor ->
I don't know why is that happening, please help to resolve this issue!

Answer 1

You should do the following:
const [editorState, setEditorState] = React.useState(() => {
const parsedData = JSON.parse(post.contentStyled);
const fromRawData = convertFromRaw(parsedData );
return EditorState.createWithContent(fromRawData);
});
// ...
<Editor
readOnly={true}
editorState={editorState}
/>
If you override the editorState with a new created state you are removing all the decorators which were added by the plugins.

Answer 2

Dominic's answer made me realize what was going on with the decorators, but his approach didn't work for me either.
What I ended up doing instead was to avoid mounting the editor altogether until I have the data inside the EditorState:
const [editorState, setEditorState] = React.useState(null);
useEffect(() => {
const parsedData = JSON.parse(post.contentStyled);
const fromRawData = convertFromRaw(parsedData );
setEditorState(() => EditorState.createWithContent(fromRawData));
}, []);
editorState && <Editor readOnly={true} editorState={editorState}/>
This way you insert your persisted data into the state before instantiating the component. And afterwards any other plugin adding decorators will work as intended.