SDK 54, crashing when openned for 2nd time from expo-router

[Engazan]

when i make SignatureDraw screen component and navigate to it for 2nd time it always crash whole app, even Error boundary do not catch that error

also i tried some tricks with isFocused but cant figure it out at all

how i navigate to the screen:

router.navigate("/(app-stack)/signature-draw")

packages:

"expo": "^54.0.30",
"expo-router": "~6.0.21",
"react-native-free-canvas": "^2.0.0",
"@shopify/react-native-skia": "2.2.12",

code:

import {useRef} from "react";
import {Alert, StyleSheet, View} from "react-native";
import {useRouter} from "expo-router";
import {useIsFocused} from "@react-navigation/native";
import FreeCanvas, {type FreeCanvasRef} from "react-native-free-canvas";
import ScreenView from "@/components/ScreenView";
import {ThemedText} from "@/components/themed-text";
import Button from "@/components/ui/Button";
import {useColorScheme} from "@/hooks/use-color-scheme";
import {useAppSelector} from "@/store";
import {useUpdateCompanySignatureMutation} from "@/store/services/api";
import {ImageFormat} from "@shopify/react-native-skia";

export default function SignatureDraw() {
    const router = useRouter();
    const canvasRef = useRef<FreeCanvasRef>(null);
    const selectedCompany = useAppSelector(state => state.company.selectedCompany);
    const [updateSignature, {isLoading}] = useUpdateCompanySignatureMutation();

    const isFocused = useIsFocused();

    const colorScheme = useColorScheme();
    const isDark = colorScheme === "dark";

    const handleReset = () => {
        canvasRef.current?.reset();
    };

    const handleSave = async () => {
        if (!selectedCompany?.uuid) {
            Alert.alert("Error", "No company selected.");
            return;
        }

        try {
            const base64 = await canvasRef.current?.toBase64(ImageFormat.PNG, 100);
            if (!base64) {
                Alert.alert("Error", "Could not capture signature.");
                return;
            }

            await updateSignature({
                companyUuid: selectedCompany.uuid,
                signature_base64: base64,
            }).unwrap();

            Alert.alert("Success", "Signature saved successfully!", [
                {text: "OK", onPress: () => router.back()},
            ]);
        } catch (error: any) {
            const message = error?.data?.message || error?.error || "Failed to save signature";
            Alert.alert("Error", message);
        }
    };

    return (
        <ScreenView insetsTop={false}>
            <View style={styles.container}>
                <ThemedText style={styles.hint}>Use your finger to draw your signature below</ThemedText>

                <View style={[styles.canvasWrapper, {borderColor: isDark ? "#333" : "#ddd"}]}>
                    {isFocused && (
                        <FreeCanvas
                            ref={canvasRef}
                            style={styles.canvas}
                            strokeColor={isDark ? "#ffffff" : "#000000"}
                            strokeWidth={3}
                        />
                    )}
                </View>

                <View style={styles.buttonRow}>
                    <View style={{flex: 1}}>
                        <Button
                            variant="outline"
                            label="Reset"
                            icon="eraser"
                            onPress={handleReset}
                        />
                    </View>
                    <View style={{flex: 1}}>
                        <Button
                            label="Save"
                            icon="check"
                            iconPosition="right"
                            onPress={handleSave}
                            loading={isLoading}
                            disabled={isLoading}
                        />
                    </View>
                </View>
            </View>
        </ScreenView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
    },
    hint: {
        fontSize: 14,
        opacity: 0.4,
        marginBottom: 16,
    },
    canvasWrapper: {
        flex: 1,
        borderRadius: 12,
        borderWidth: 1,
        overflow: "hidden",
    },
    canvas: {
        flex: 1,
    },
    buttonRow: {
        flexDirection: "row",
        gap: 12,
        marginTop: 16,
        paddingBottom: 16,
    },
});