Cannot add a new line in JSX

Question

I am using the recharts library to create pie charts. Here is their demo code that I am trying to modify. I am trying to put a line break under the percentage. E.g.

25%

Hello

Documentation: https://recharts.org/en-US/examples/PieChartWithCustomizedLabel

Code: https://jsfiddle.net/alidingling/c9pL8k61/

This is the code snippet I am trying to work on.

return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'}    dominantBaseline="central">
    {`${(percent * 100).toFixed(0)}%`}
</text>
);

This is what I have tried- to no avail.

return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'}    dominantBaseline="central">
    {`${(percent * 100).toFixed(0)}%`}  <br /> Hello
</text>
);

And this.

return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'}    dominantBaseline="central">
    {`${(percent * 100).toFixed(0)}% \n Hello`}
</text>
);

And combinations of the above. Can anyone point me to the right direction?