Preserving editorState and history in LexicalEditor inside Bootsrap Overlay

Question

How can I preserve the state of the editor and the history without useState, i.e. prevent the creation of a new instance of the editor every time the overaly is triggered? This is vanilla create-react-app.

import './App.css';
import { useState, useRef } from 'react';
import { Button, Overlay } from 'react-bootstrap';

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';

import editorTheme from './editorTheme';


function App() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  return (
    <>
      <Button
        ref={target}
        onClick={() => { setShow(!show) }}
      >
        Notes
      </Button>
      <Overlay
        show={show}
        target={target.current}
        placement='bottom'

      >
        {({
          placement: _placement, arrowProps: _arrowProps, show: _show, popper: _popper, hasDoneInitialMeasure: _hasDoneInitialMeasure, ...props
        }) => (
          <div
            {...props}
            style={{ ...props.style }}
          >
            <LexicalComposer initialConfig={{
              theme: editorTheme,
              onError: err => console.error(err)
            }}>
              <PlainTextPlugin
                contentEditable={<ContentEditable
                  style={{ borderWidth: '1px', borderStyle: 'solid', minWidth: '5rem' }}
                />}
                placeholder=""
                ErrorBoundary={LexicalErrorBoundary} />
              <HistoryPlugin />
            </LexicalComposer>
          </div>
        )}
      </Overlay>
    </>
  );

}

export default App;