xterm-addon-fit not working when it parent is a tab has forceRender={true}

Question

I'm using forceRender={true} in order to preserve the state/context of the xterm.js termina emulator. However, when it's set, fitAddon.fit(); doesn't work. What am I missing?

creating react the tab like this:

<TabPanel key="3" forceRender={true}>
  <Terminal />
</TabPanel>

Where Terminal component is:

export const Terminal = () => {
  useEffect(() => {
    const terminal = new TerminalType({
      cursorBlink: true,
      cursorStyle: window.api.isWindows ? "bar" : "underline"
    });

    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);

    window.api.receive('terminal.incomingData', (data) => {
      terminal.write(data);
    });
    
    terminal.open(document.getElementById('xterm-container') as HTMLElement);
    terminal.onData((key) => {
      window.api.send('terminal.keystroke', key);
    });
    fitAddon.fit();
    window.api.send('terminal.keystroke', '\r');
  }, []);

  return (
    <div id="xterm-container"></div>
  )
}