How to add circles using Point and Polygon with JSX syntax

Ask: Specifically I want to do this: https://docs.microsoft.com/en-us/azure/azure-maps/map-add-shape#add-a-circle-to-the-map

I want a geospatially correct circle as the user zooms in and out.

Alternatives I've tried: Bubble layer gets me a circle but the radius is pixel fixed which is why I discarded this approach and want to get the above point/shape + Polygon layer combo working.

Question: It is not clear to me where to apply properties subType and radius when using the JSX components offered by this library.

I tried something like this where I specify type as a point and variant as shape. Then I add subType and radius to properties. This did not work and nothing from this layer shows up on the map.

Is this on the right track and if so, what is missing in order to render a point as a geospatially correct circle?

myPoints

<AzureMapFeature
  key={id}
   id={id}
   variant="shape"
   type="point"
   coordinates={[new Position(0, 0)]}
   properties={{
       subType: 'Circle',
       radius: 10000 //meters
     }}
 />

Later I create a PolygonLayer like this myPolygonLayer

<AzureMapLayerProvider
  id={`${layerId}-polygonLayer-circles`}
  options={{
    fillOpacity: 0.75,
    fillColor: 'red',
  }}
  type="PolygonLayer"
  events={eventsHandlers}
/>

Finally I create a DataSource provider like this with the above two JSX components DataSource

<AzureMapDataSourceProvider id={layerId}>
  {myPolygonLayer}
  {myPoints}
</AzureMapDataSourceProvider>

Thanks!

Azure / react-azure-maps

How to add circles using Point and Polygon with JSX syntax #107