JSX Confusion

ExampleJsx.tsx

const FeatureLayer = ({ id, circular }: { id: string; circular: boolean }) => {
  if (circular) {
    return (
      <MapboxGL.CircleLayer
        id={`${id}-circle`}
        style={{ circleRadius: 500, circleColor: "black" }}
      />
    )
  } else {
    return (
      <MapboxGL.FillLayer id={`${id}-fill`} style={layerStyles.featureFill} />
    )
  }
}

// This doesn't work
const FillFeature = ({ feature, id, circular }: FillFeatureProps) => {
  return (
    <MapboxGL.ShapeSource id={id} shape={feature}>
      <FeatureLayer id={id} circular={circular} />
    </MapboxGL.ShapeSource>
  )
}

// This works
const FillFeature = ({ feature, id, circular }: FillFeatureProps) => {
  return (
    <MapboxGL.ShapeSource id={id} shape={feature}>
      {circular ? (
        <MapboxGL.CircleLayer
          id={`${id}-circle`}
          style={{ circleRadius: 50, circleColor: "black" }}
        />
      ) : (
        <MapboxGL.FillLayer id={`${id}-fill`} style={layerStyles.featureFill} />
      )}
    </MapboxGL.ShapeSource>
  )
}