Keep side by side preview after rerender

[HananoshikaYomaru]

https://user-images.githubusercontent.com/43137033/159111926-68633e3f-de82-4de0-8095-69c53cb20c24.mov

<SimpleMDE
        value={data}
        onChange={(text) => {
          onChange(text);
        }}
        options={{
          spellChecker: false,
          autofocus: true,
          initialValue: entry.defaultValue,
          showIcons: ["undo"],
          hideIcons: ["fullscreen"],
          sideBySideFullscreen: false,
          inputStyle: "textarea",
        }}
        getMdeInstance={(instance) => {
          if (instance.codemirror.getWrapperElement().nextSibling)
            EasyMDE.toggleSideBySide(instance);
        }}
        getCodemirrorInstance={(instance) => {}}
      />

I used the above code for the editor. When the input is changed, onChange function will call setState and trigger a rerender. However, the side by side preview doesn't persist and I have to toggle it manually. I think there is better to achieve this but I don't know how. Can someone help me a bit.

[RIP21]

First of all, try to memoize options and all the props you pass down. E.g. use useMemo and useCallback where it's needed. Otherwise, you'll end up creating a new instance of MDE on each keypress more likely.

If it won't help, go ahead and create Codesanbox with reproduction, I'll take a look what's the problem here.

Cheers.