How to use frameProcessor with useSkiaFrameProcessor ? my app crashes when running

Description

Dear all, i just tested with a simple code of tsx:

`import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';

const paint = Skia.Paint();

paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);

export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');

const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';

// 1. Render camera frame
frame.render();

// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;

const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;

// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);

// 4. Draw on the frame
frame.drawRect(rect, paint);

}, []);

if (!device) return null;

return (

);
};

const styles = StyleSheet.create({
camera: { flex: 1 },
});`

but when tested on device, the app crashed and exit.
when testing with XCode, i have these debug info:

anyone can help about using worklet and frame to draw some rect with useSkiaFrameProcessor ? thanks a lot

terminating due to uncaught exception of type facebook::jsi::JSError: Cannot read property 'width' of undefined
TypeError: Cannot read property 'width' of undefined
at shopify_CanvasTsx1 (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/@shopify/react-native-skia/src/renderer/Canvas.tsx:119:26)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-reanimated/src/frameCallback/FrameCallbackRegistryUI.ts:58:38)
at forEach (native)
at loop (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-reanimated/src/frameCallback/FrameCallbackRegistryUI.ts:49:43)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-worklets/src/runLoop/uiRuntime/requestAnimationFrame.ts:28:16)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-worklets/src/runLoop/uiRuntime/requestAnimationFrame.ts:48:42)
at callGuard (native)

React Native Skia Version

2.4.7

React Native Version

0.81.5

Using New Architecture

• Enabled

Steps to Reproduce

copy my code an tsx file and test with xcode build of iOS.

`import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';

const paint = Skia.Paint();

paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);

export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');

const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';

// 1. Render camera frame
frame.render();

// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;

const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;

// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);

// 4. Draw on the frame
frame.drawRect(rect, paint);

}, []);

if (!device) return null;

return (

);
};

const styles = StyleSheet.create({
camera: { flex: 1 },
});
`

Snack, Code Example, Screenshot, or Link to Repository

import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';

const paint = Skia.Paint();

paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);

export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');

const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';

// 1. Render camera frame
frame.render();

// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;

const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;

// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);

// 4. Draw on the frame
frame.drawRect(rect, paint);

}, []);

if (!device) return null;

return (

);
};

const styles = StyleSheet.create({
camera: { flex: 1 },
});

Start with the reproduced TSX example and the stack trace into @shopify/react-native-skia/src/renderer/Canvas.tsx:119, then inspect the React Native Worklets and Reanimated frame-callback entries shown there. Use an iOS/Xcode build to determine why the frame is undefined during useSkiaFrameProcessor execution; done means the crash cause and a verified working usage path are established.