Updated SkPath in every 10 MS not working

[easedroid]

I am working on a POC to draw some graphs using skia in every 10 ms but it is not working. I am sharing the code snippet here. Please help if anyone have any suggestion.

interface SKCanvas {
  setPath?: (svg: string) => void;
}

const SKCanvas = React.forwardRef<SKCanvas>(
  (props, ref: React.Ref<SKCanvas> | undefined) => {
    const {width, height} = useWindowDimensions();
    const graphHeight = 136;
    const paint = Skia.Paint();
    paint.setColor(Skia.Color('lightblue'));
    paint.setStrokeWidth(2);
    paint.setStrokeJoin(StrokeJoin.Round);
    const path = useSharedValue<SkPath>(Skia.Path.Make());

    useImperativeHandle(
      ref,
      () => ({
        setPath(svg) {
         // here it will receive the svg data from parent component in every 10 ms
          path.value = Skia.Path.MakeFromSVGString(svg)!;
        },
      }),
      [],
    );

    const computedPath = useDerivedValue(() => {
      console.log(path.value?.toSVGString());
      return path.value;
    }, [path]);

    return (
      <View style={{width: '100%', height: '100%'}}>
        <Canvas style={{flex: 1}}>
          <Group>
            <Path
              path={computedPath.value ?? Skia.Path.Make()}
              strokeWidth={2}
              strokeJoin={'round'}
              // start={0}
              // end={1}
              style={'stroke'}
              color={Skia.Color('black')}
            />
          </Group>
        </Canvas>
      </View>
    );
  },
);

@william-candillon please guide me I tried with svg but it's not that much smooth.