Reactjs – Markdown Editor in React Not Rendering Line Breaks Correctly

I’m using @mdxeditor/editor to edit a markdown. I save in database the changes every seconds. All of this works fine.

Problem:
When I save note, in database, I can see the n when I set a new line in my textarea but when I display it in my markdown, the new lines are not rendered.

For example if there is this in database :

"notes":"**my super note**nnnnew line after 2 entersnn*and again*"

And the console log of my user.notes is exactly the same, my frontend end will display :

**my super note**
new line after 2 enters
and again

Here is my code :

export const MarkDownEditor: React.FC = () => {
  const [user, setUser] = useAtom(userAtom);
  const [currentNote, setCurrentNote] = useState("");

  useEffect(() => {
    const timer = setTimeout(() => {
      if (user && currentNote !== user.notes) {
        UserApi.patch({ notes: currentNote }).then((res) => {
          if (res.status === 200) {
            const newUser = { ...user };
            newUser.notes = currentNote;

            setUser(newUser);
          }
        });
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [currentNote, user, setUser]);

  const handleMarkdownChange = (newNote: string) => {
    setCurrentNote(newNote);
  };

  if (!user) return null;

  return (
    <ForwardRefEditor markdown={user?.notes} placeholder="Prenez vos notes ici... !" onChange={handleMarkdownChange} />
  );
};

const Editor = dynamic(() => import("./InitializedMDXEditor"), {
  ssr: false,
});

export const ForwardRefEditor = forwardRef<MDXEditorMethods, MDXEditorProps>((props, ref) => (
  <motion.div initial="hidden" animate="visible" variants={makeCardOpacity()}>
    <Card className="h-full w-full ring lg:w-fit lg:min-w-[400px]">
      <Editor {...props} editorRef={ref} />
    </Card>
  </motion.div>
));

ForwardRefEditor.displayName = "ForwardRefEditor";

export default function InitializedMDXEditor({
  editorRef,
  ...props
}: { editorRef: ForwardedRef<MDXEditorMethods> | null } & MDXEditorProps) {
  return (
    <MDXEditor
      {...props}
      ref={editorRef}
      plugins={[
        headingsPlugin(),
        listsPlugin(),
        quotePlugin(),
        imagePlugin(),
        tablePlugin(),
        thematicBreakPlugin(),
        markdownShortcutPlugin(),
        toolbarPlugin({
          toolbarContents: () => (
            <>
              <UndoRedo />
              <BoldItalicUnderlineToggles />
              <CodeToggle />
              <ListsToggle />
              <InsertTable />
              <InsertThematicBreak />
            </>
          ),
        }),
      ]}
    />
  );
}

How can I force the render of the new lines ?

Thank you