Height keeps shrinking when using fitAddon.fit()

The initial fitAddon.fit() works but I am running it again each time a user resizes their window and for some reason, it keeps shrinking in height when that is not expected. When adjusting from the window left to right, the terminal will resize correctly in width but it also shrinks each time in height. I thought there may be some underlying styling issues with my app so I tried this in a fresh create-react-app and i was getting the same behavior

resizing issue

Code:

App.tsx

import { useEffect, useMemo, useRef, useState } from 'react'
import { FitAddon } from '@xterm/addon-fit'
import { Unicode11Addon } from '@xterm/addon-unicode11'
import { WebLinksAddon } from '@xterm/addon-web-links'
import { WebglAddon } from '@xterm/addon-webgl'
import { Terminal } from '@xterm/xterm'
import '@xterm/xterm/css/xterm.css'
import { useWindowSize } from './utils';

function App() {
  const terminalRef = useRef<HTMLDivElement | null>(null)
  const [term, setTerm] = useState<Terminal | null>(null)
  const fitAddon = useMemo(() => new FitAddon(), [])
  const size = useWindowSize()

  useEffect(() => {
    const terminal = new Terminal({
      allowProposedApi: true,
      cursorBlink: true,
    })
    setTerm(terminal)
    return () => {
      if (terminal) {
        terminal.dispose()
      }
    }
  }, [])

  useEffect(() => {
    if (term) {
      if (terminalRef.current) {
        term.open(terminalRef.current)
        setTerm(term)
        term.loadAddon(fitAddon)
        term.loadAddon(new WebLinksAddon())
        term.loadAddon(new WebglAddon())

        term.loadAddon(new Unicode11Addon())
        fitAddon.activate(term)
        fitAddon.fit()
      }
    }

    return () => {
      term?.dispose()
    }
  }, [fitAddon, term, terminalRef])

  useEffect(() => {
    fitAddon.fit()
    console.log(fitAddon.proposeDimensions())
  }, [term, size, fitAddon])

  return (
   <div ref={terminalRef}/>
  );
}

export default App;

utils.tsx

import { useEffect, useState } from 'react'

interface WindowSize {
  width: number
  height: number
}

export const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  })

  const onWindowResize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight })
  }

  useEffect(() => {
    window.addEventListener('resize', onWindowResize)

    return () => {
      window.removeEventListener('resize', onWindowResize)
    }
  }, [])

  return windowSize
}

Details

Browser and browser version: Google Chrome Version 124.0.6367.208 (Official Build) (64-bit)
OS version: win10
xterm.js version: 5.5.0

xtermjs / xterm.js

Height keeps shrinking when using fitAddon.fit() #5058

Code:

Details