所以，我有一个组件，可以在一个内在的孩子周围写弯曲的文本。

import {
  PropsWithChildren,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

interface ICurvedText extends PropsWithChildren {
  text: string;
}

export const CurvedText = ({ text, children }: ICurvedText) => {
  const ref = useRef<HTMLHeadingElement>(null);
  const [wrapperWidth, setWrapperWidth] = useState(0);

  useLayoutEffect(() => {
    const width = ref.current?.offsetWidth;
    if (width) setWrapperWidth(width);
  }, []);

  const roundedText = useMemo(() => {
    const chars = text.split('');
    const reversed = Array.from(chars).reverse(); // not sure if reversing the order is correct or not

    return reversed.map((char: string, i: number) => {
      const rotation = (i / text.length) * 180;
      return (
        <div
          className="text-white font-thin text-xs"
          style={{
            transform: `rotate(${rotation}deg)`,
            transformOrigin: `0px ${wrapperWidth / 2}px`,
            left: '50%',
            position: 'absolute',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: 10,
          }}
          key={i}
        >
          {char}
        </div>
      );
    });
  }, [text, wrapperWidth]);

  return (
    <div
      ref={ref}
      style={
        wrapperWidth
          ? {
              width: wrapperWidth,
              height: wrapperWidth,
            }
          : {}
      }
      className="relative rounded-full flex justify-center items-center"
    >
      <>
        {children}
        <div className="h-full absolute">{roundedText}</div>
      </>
    </div>
  );
};

问题是，我希望能够把文本放在圆圈下面，但要从左到右阅读。
目前，文本只是从起始度数顺时针绕一个圆。