React doesn't recognize properties of ZoomableGroup from react-simple-maps only on local machine

Question

I'm using next.js framework and vscode. I tried to limit panning to the edges of the map, using the translateExtent of ZoomableGroup.

I found an example codesandbox implementing just that, but running my implementation or even the exact same code on my machine gives me the following error: "Warning: React does not recognize the `translateExtent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `translateextent` instead. If you accidentally passed it from a parent component, remove it from the DOM element."

I have tried uninstalling node_modules and reinstalling all dependencies, I've checked the versions, permissions and even my browser's settings. I'm stuck on this for a week and every general solution I've tried didn't work, I didn't find anyone with the same issues.

I've copy pasted the working code from the sandbox to my machine and it just gives the same warning, the code still runs but it doesn't limit the panning. The exact same code just doesn't work.

• side notes: the topojson in the sandbox got deleted, and the first coordinates of translateExtent should be [0,0]. Here is a link to my codesandbox with those things fixed: https://codesandbox.io/s/react-simple-maps-constrained-panning-forked-qflzlp?file=/src/MapChart.js

Here are relevant snippets of my code if it adds information (deleted the rest), didn't initially add because the code from the sandbox itself doesn't work (In a futile attempt I tried to use propTypes as a workaround):

import React, { useState } from "react";
import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps";
import PropTypes from 'prop-types';
import topology from "./assets/topo.js"

const mapWidth = 1070;
const mapHeight = 600;

const MapChart = ({ translateextent }) => {
  return (
    <div style={{ display: "inline-flex", width: "100vw", height: "100vh"}}>
      <ComposableMap
          width={mapWidth}
          height={mapHeight}
          projectionConfig={{ scale: 228}}
        >
        <ZoomableGroup
          translateExtent={...translateextent}
          zoom={position.zoom}
          center={position.coordinates}
        >
          <Geographies geography={topology}>
            {({ geographies }) =>
              geographies.map((geo) => (
                <Geography key={geo.rsmKey} geography={geo} 
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
      </div>
    </div>
  );
};

export default function render() {
  return (
    <MapChart translateextent={[
      [0, 0],
      [mapWidth, mapHeight]
    ]} />
  )
}

MapChart.propTypes = {
  translateextent: PropTypes.arrayOf(
    PropTypes.arrayOf(PropTypes.number)
  ).isRequired,
};