Object ordering

[prabuvenkat-gh]

I would like to render a circle (solid fill white) on top of a line such that the occulted portion of the line is not visible. However irrespective of the order in which I render the two objects, I am unable to achieve the desired results. Am I doing something fundametally wrong?

<ReactRough>
  <Circle
    x={100}
    y={100}
    diameter={50}
    fill={palColors.white}
    fillStyle={'solid'}
  />
  <Line x1={50} y1={50} x2={200} y2={200} stroke={palColors.red} />
</ReactRough>

(and the same snippet with the line first and the circle afterwards).. Either way the output is the same --