Maximum call stack size exceeded when using dash_table.DataTable with flex

Environment

dash                 2.0.0
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

- OS: Ubuntu 20.04
- Browser: Chrome
- Version 93

Describe the bug

I have a dash page with a dash_table.DataTable component. The layout looks like this

html.Div style={display='flex'}
  html.Div style={flex=2}
    dash_table.DataTable
  html.Div style={flex=1}
    "some other content"

When I load the webpage, the browser hangs. Here is the stacktrace in JS:

error.js:38 RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at lx.trim (polyfill@7.v2_0_0m1632404132.12.1.min.js:1)
    at parseInt (polyfill@7.v2_0_0m1632404132.12.1.min.js:1)
    at s.handleResize (index.tsx:292)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)

It only happens when number of rows in page is small and table height does not exceed the 100vh. If number of rows are big, then there is no issue.

I am trying to replicate this with a minimal example. Will update here later.

Expected behavior

Above error should not happen.

Start with the DataTable resize handler shown at index.tsx lines 292 and 298, then reproduce the reported flex layout with a small number of rows in Chrome. Compare the resize behavior when the table exceeds 100vh and when it does not. Done means the minimal layout loads without the reported RangeError or browser hang.