React calls custom class’s constructor many times and with weird params

hope you’re having a good day 😀

I’m trying to make a Grid data structure based on the Array class, I intended to add custom methods and properties, so I started with a simple Test class:

import { useState } from 'react'

class Grid extends Array {
  constructor(data) {
    console.log('called with', arguments);
    super(...data)
  }
}

function App() {
  const [ count ] = useState(new Grid([1,2,3]))

  return (
    <div className="App">
      {count.map(row => <p key={row.rowId}>
        row {row}
      </p>)}

    </div>
  )
}

export default App

My final goal was to encapsulate all the logic inside the class but when I imported it in the app it started crashing:

These are the logs I got from the chrome console:

App.jsx:5 called with Arguments [Array(3), callee: (...), Symbol(Symbol.iterator): ƒ]
App.jsx:5 called with Arguments [3, callee: (...), Symbol(Symbol.iterator): ƒ]
App.jsx:5 called with Arguments [Array(3), callee: (...), Symbol(Symbol.iterator): ƒ]
App.jsx:5 called with Arguments [3, callee: (...), Symbol(Symbol.iterator): ƒ]

App.jsx:6 Uncaught TypeError: Found non-callable @@iterator
    at new Grid (App.jsx:6:5)
    at Grid.map (<anonymous>)
    at App (App.jsx:15:14)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)

As you may see, the constructor got called a lot of times, some times using the last item of the provided array…
Is this some React related behavior?