Stickers.tsx

export default function Stickers({ stickers = [] }: { stickers: Sticker[] }) {
  const [matrixes, setMatrixes] = React.useState<SharedValue<SkMatrix>[]>([]);
  React.useEffect(() => {
    setMatrixes(stickers.map(() => makeMutable(Skia.Matrix())));
  }, [stickers]);
  return (
    <>
      <Canvas>
        {stickers.map((sticker, index) => (
          <Group key={sticker.id} matrix={matrixes[index]}>
            <Image
              image={image}
            />
          </Group>
        ))}
      </Canvas>
      {stickers.map((sticker, index) => {
              const dimensions = rect(
                  sticker.x,
                  sticker.y,
                  sticker.width,
                  sticker.width,
              );
              if (matrixes[index]) {
                  return (
                      <GestureHandler
                          key={`gesture-handler-${sticker.id}`}
                          matrix={matrixes[index]}
                          dimensions={dimensions}
                      />
                  );
              }
              return null;
          })}
    </>
  );
}