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_
```

```

Later I create a PolygonLayer like this
_myPolygonLayer_
```

```

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

{myPolygonLayer}
{myPoints}

```

Thanks!