Could not save again when clear the previous data that already saved in database

[RuFang-21]

const JobSignatureScreen: React.FC<JobNavigatorScreenProps<'JobSignature'>> = ({
  route,
  navigation,
}) => {
  const ref = useRef<SignatureViewRef>(null);

  const handleOK = (signature: any) => {
    route.params.onOk(signature);
    navigation.goBack();
  };

  const handleClear = () => {
    ref?.current?.clearSignature();
  };

  const handleConfirm = () => {
    ref?.current?.readSignature();
  };

  console.log(route?.params?.data);

  // Hide default footer and custom signature pad style
  const style = `
    .m-signature-pad {
      position: fixed;
      margin:auto; 
      top: 0; 
      width:100%;
      height:100%
    }
    body,html { 
      position:relative; 
    }
    .m-signature-pad--footer {display: none;}
  `;

  return (
    <Box flex={1}>
      <AppBar
        leftIcon={'cross'}
        goBackTitle={'Customer Signature'}
        goBack
        rightComponent={
          <HStack space={3}>
            <Button
              disabled={isLoading}
              variant="outline"
              onPress={handleClear}>
              Clear
            </Button>
            <Button
              isLoading={isLoading}
              variant="primary"
              onPress={() => {
                handleConfirm();
              }}>
              Save
            </Button>
          </HStack>
        }
      />

      <View
        position="relative"
        flex={1}
        alignItems={'center'}
        justifyContent={'center'}>
        <SignatureScreen
          dataURL={route?.params?.data}
          ref={ref}
          onOK={handleOK}
          onLoadEnd={() => {
            console.log('end');
          }}
          webStyle={style}
        />

        <DashedLine
          style={{
            position: 'absolute',
            left: 90,
            right: 90,
            bottom: 50,
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 20,
          }}
          dashColor="#B8C1CB"
          dashGap={10}
          dashThickness={0.7}
          dashLength={20}
        />
        <Text
          color={COLORS.neutrals.gray800}
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 40,
            justifyContent: 'center',
            alignItems: 'center',
            textAlign: 'center',
          }}>
          {'Insert your T&C here (if any)'}
        </Text>
      </View>
    </Box>
  );
};

export default JobSignatureScreen;

"react-native": "0.72.4"
"react-native-signature-canvas": "^4.7.1",
"react-native-webview": "^13.6.0",

onOk not trigger and no error showing when onClear previous data and draw new signature. Could you help me on this? Thanks in advanced.

[YanYuanFE]

Can you provide a complete code repository?