CircularProgressBarWithChildren with multiple CircularProgressbars doesn't work

[SuperJonotron]

🐛 Bug report

Summary of issue

Attempting to create a multi circle bar using the examples provided, once you add more than one child to the CircularProgressbarWithChildren, the formatting gets messed up and the children and the main element no longer line up.

Reproducible example

If you remove one of the CircularProgressbar elements from the children, everything is fine but once there's two or more, it all goes haywire.

  	render(){
  		return(
	  		<div>
		  		<CircularProgressbarWithChildren
			        value={(100/500)*100}
			        styles={buildStyles({
			          pathColor: "yellow",
			          trailColor: "#eee",
			          strokeLinecap: "butt",
			        })}
			    >
			        <CircularProgressbar
			          value={(50/500)*100}
			          styles={buildStyles({
			          	pathColor: "green",
			            trailColor: "transparent",
			            strokeLinecap: "butt"
			          })}
			        />
			        <CircularProgressbar
			          value={(200/500)*100}
			          styles={buildStyles({
			          	pathColor: "orange",
			            trailColor: "transparent",
			            strokeLinecap: "butt"
			          })}
			        />
			       
			    </CircularProgressbarWithChildren>
	        </div>
       );
  	}

Your environment

Browser: Google chrome
react-circular-progressbar version: 2.0.4