Circle Layer changes size when zooming in and out

[MattL-NZ]

I have a basic Source with a Layer inside of it rendering a circle on the screen.
When I zoom into the map, the circle also changes size. Is there a way to make it so the circle dimensions are static and do not change?

Zoomed Out you can see the area inside the circle

When I zoom in, you can see the area inside the circle has changed meaning the circle radius is potentially being updated when zoomed in?

Is there a way to set this circle to be static so it doesn't change size?

import * as React from 'react';
import 'mapbox-gl/dist/mapbox-gl.css';
import {Map, Source, Layer, Marker, GeolocateControl, NavigationControl} from 'react-map-gl';
import {seedData} from "../../core/constants/seed";

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [174.753476, -36.873301]
      }
    }
  ]
};

export default function MapBoxV2() {
  return <Map
      mapboxAccessToken={process.env.MAPBOX_KEY}
      initialViewState={{
        latitude: -36.91,
        longitude: 174.7,
        zoom: 10
      }}
      style={{width: '100%', height: '100%'}}
      mapStyle="mapbox://styles/mapbox/streets-v9">
    
    <Source maxzoom={0} id="my-data" type="geojson" data={geojson}>
      <Layer type='circle' id='point' paint={{
        'circle-radius': 100,
        'circle-opacity': 0.5,
        'circle-color': '#007cbf',
      }}/>
    </Source>
    <GeolocateControl/>
    <NavigationControl showZoom={true} position='bottom-left'/>
  </Map>
}

[LhonRafaat]

Did you manage to fix this? having the same issue