Text is partially rendered

[killerchip]

Hello.
I have the following issue which is driving me crazy and I would like your input on where to start troubleshooting.
I'm using Text element in various places of a page, to render text. But sometimes (not always) some text parts are rendered with missing characters.

If I scroll the page down, so the Text elements are getting unmounted and then scroll up and they get remounted again, the text appears normally.

Here's the component that renders a single text block:

export const CardText = ({
  text,
  fontAsset = Assets.Font_Gilroy_Medium,
  color = 'white',
  position = { x: 0, y: 0 },
  fontSize = 12,
  zPosition = PLANE_DEFAULT_Z + 0.0001,
  ...rest
}: CardTextProps) => {
  const { gl, scene, camera } = useThree();
  const { get, loaded } = useAssetsStore();
  const charSet = useMemo(() => removeDuplicates(text), [text]);

  if (!loaded) return null;

  const font = get(fontAsset);

  return (
    <Suspense>
      <TroikaText
        matrixWorldAutoUpdate={undefined}
        getObjectsByProperty={undefined}
        getVertexPosition={undefined}
        characters={charSet}
        position={[position.x, position.y, zPosition]}
        color={color}
        font={font?.uri}
        fontSize={fontSize}
        onSync={() => gl.render(scene, camera)} // helps re-render when font-glyphs are done
        {...rest}
      >
        {text}
      </TroikaText>
    </Suspense>
  );
};

As you can see in the code I have tried Suspense, I have tried characters, I have tried onSync. But the issue just remains.

Any ideas what might causing this? or where to look further?

Thanks in advance.