I was trying to recreate this sample from r3f https://codesandbox.io/p/sandbox/condescending-tereshkova-r7f742?file=%2Fsrc%2FPrice.js%3A32%2C4

My issue is related with the Mask since the Text is not limited by the Mask and its stencil props:

<Mask id={1}>
  <planeGeometry args={[10, 1.55]} />
</Mask>

this is the code:

function App() {
  const [price, setPrice] = useState([1, 3, 1, 5]);
  useEffect(() => {
    setTimeout(() => {
      setPrice([7, 5, 6, 8]);
    }, 2000);
  }, []);
  return (
    <div className="w-screen h-screen">
      <Canvas>
        <ambientLight intensity={1.5 * Math.PI} />
        <Sky />

        <group position={[0, 0, 0]}>
          {price.map((x, index) => (
            <Counter index={index} key={index} value={x} />
          ))}
          <Mask id={1}>
            <planeGeometry args={[10, 1.55]} />
            <meshBasicMaterial color={"red"} />
          </Mask>
        </group>
      </Canvas>
    </div>
  );
}

function Counter({ index, value }: { index: number; value: number }) {
  const ref = useRef(null);
  const stencil = useMask(1);
  useFrame((state, delta) =>
    easing.damp(
      ref.current!["position"],
      "y",
      value * -2,
      0.1 * (4 - index),
      delta
    )
  );
  return (
    <group position-x={index * 1.1} ref={ref}>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (
        <Text
          key={number}
          position={[0, number * 2, 0]}
          fontSize={2}
          // font={"./helvetiker_regular.typeface.json"}
        >
          {number}
          <meshStandardMaterial {...stencil} />
        </Text>
      ))}
    </group>
  );
}