Implement an auto-resizing mechanism of editors

Question

I would like to implement a resizing mechanism for Editor 2:

• The main purpose is to let the height of Editor 2 auto-resize so as to occupy the rest of the page after adding/removing Editor 1 and each resizing of the window.
• In the beginning, there is only Editor 2 in the window. Click to toggle "Editor 1" allows to add or remove Editor 1.
• The height of Editor 1 is implemented by calculateNextHeightFirst. It has minimum 3 rows, then is determined by the height of the content, but has maximum 10 rows.
• After adding Editor 1, the resizing of Editor 2 needs to be triggered to occupy the rest of the page.
• Resizing Editor 1 by adding or removing contents does not need to systematically trigger the resizing of Editor 2. It's especially the resizing of the window that triggers the resizing of Editor 2.

Here is my current code: https://stackblitz.com/edit/react-ts-5nkshr?file=EditorBasic.tsx,App.tsx,EditorPlus.tsx,index.html

The behaviour of the code satisfies my requirement described above. However, at least one thing I find not normal is, I need to manually set height: 72 as initial state of EditorPlus, which is same as the initial height of Editor 1 determined by calculateNextHeightFirst. Otherwise, after clicking Click to toggle "Editor 1", this.aRef.current.clientHeight would not be correctly set, thus the height of Editor 2 would not be well set.

Maybe I would need rare lifecycle methods such as getDerivedStateFromProps, does anyone confirm?

As this case involves event handlers, react Refs, React lifecycle, and editors, could anyone tell me if my code is properly implemented?

(* link in codereview: https://codereview.stackexchange.com/questions/282577 *)