Why does Circle revert it's radius in react-google-maps?

Question

I have a react app that adds a circle to a map when you click on the map, the circle has a default radius of 20. Every time I add a circle, this radius shows up fine, but all previous circles have their radii revert to .2. My render is basically:

<MapComponent
    defaultZoom={18}
    defaultCenter={this.props.center}
    onClick={this.props.onMapClick}
>
    {this.props.circles.map((singleCircle) => {
        return <Circle
            center={singleCircle.centerPoint.latLng()}
            radius={singleCircle.radius}
            key={singleCircle.id}
       />
    })}
</MapComponent>

I have console.log() all over the place. The radius is coming through, but the component is not rendering the correct radius if it is not the recently place.

Answer 1

I have no idea why but here's the solution:

<Circle
    options={{...someCircleOptions, radius: obstacle.radius}}
    center={singleCircle.centerPoint.latLng()}
    radius={singleCircle.radius}
    key={singleCircle.id}
/>

the most important bit being radius: obstacle.radius being passed to the prop options. Idk why that supersedes the radius props.