How to add text inside an SVG circle in React?

Question

I have an animated SVG circle and I want to place text inside this circle but I am unable to do so, code:

import Circle from './Circle'

const Project = () => {
 return (
  <div>
    <Circle>
      <text>Hello World</text>
    </Circle>
  </div>
)

Whereas Circle is a Lottie Animation which is rendered in the form of SVG.

Circle.js

import React, { useEffect, useRef } from 'react';
import Lottie from 'lottie-web';
import animate from 'lottie-web';

const Circle = () => {
    const container = useRef(null);
  
    useEffect(() => {
      Lottie.loadAnimation({
        container: container.current,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: require('./circle_around_text.json'),
      });
      animate.setSpeed(0.5);
    }, []);
  
    return (
          <div className='circle-container' ref={container}></div>
    );
  };
  
  export default Circle;

But I am getting the output as this only:

I need to get the text inside this circle but my text is no where visible on the screen. How can I do this?