如何使用react原生svg使文本在圆圈中间居中？

import React from 'react';

const CircleWithText = () => {
  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="blue" />
      <text x="50" y="50" textAnchor="middle" alignmentBaseline="central" fill="white">
        Hello World
      </text>
    </svg>
  );
};

export default CircleWithText;

import React from 'react';
import CircleWithText from './CircleWithText';

const App = () => {
  return (
    <div>
      <CircleWithText />
    </div>
  );
};

export default App;