Black area after erasing signature that shouldn't be when erasing

[DroidZed]

Hi, I'm experiencing this bug with the <SignatureView> component as follows:

1. Draw something on the canvas
2. Erase it
3. Display the image using the base64 after readSignature() call
4. Observe the horrendous mess created

Related code:

const [sig, setSig] = useState('');
const handleSetSig = useCallback((signature: string) => {
    console.log('[SIG SCREEN]: ' + signature);
    setSig(signature);
}, []);

const handleDeleteSig = useCallback(() => {
    sigRef.current?.clearSignature();
    setSig('');
}, []);

JSX:

      <View
        style={{
          height: 250,
          position: 'relative',
        }}>
        <SignatureView
          ref={sigRef}
          onOK={handleSetSig}
          penColor="black"
          nestedScrollEnabled
          scrollable={false}
          style={{ backgroundColor: 'white', borderRadius: 12 }}
          webviewContainerStyle={{ backgroundColor: 'white', borderRadius: 12 }}
          webStyle={`
                .m-signature-pad {
                  background-color: transparent;
                }
                .m-signature-pad {
                  flex: 1;
                  box-shadow: none;
                  border-radius: 10px;
                }
                .m-signature-pad--footer {
                  display: none;
                }
                `}
          backgroundColor="white"
        />
        <View
          style={{
            position: 'absolute',
            top: 10,
            alignItems: 'center',
            justifyContent: 'center',
            gap: 20,
            borderWidth: 1,
            borderRadius: 25,
            padding: 5,
            right: 10,
            borderColor: AppTheme.AppLight.colors.border,
            backgroundColor: AppTheme.AppLight.colors.card,
          }}>
          <Pressable
            onPress={() => {
              sigRef.current?.erase();
              sigRef.current?.changePenSize(5, 5);
            }}
            style={({ pressed }) => [
              {
                transform: [{ scale: pressed ? 0.98 : 1.0 }],
              },
            ]}>
            <View>
              <MaterialCommunityIcons name="eraser" size={30} color="black" />
            </View>
          </Pressable>

          <Pressable
            onPress={() => {
              sigRef.current?.draw();
              sigRef.current?.changePenSize(1, 1);
            }}
            style={({ pressed }) => [
              {
                padding: 2,
                transform: [{ scale: pressed ? 0.98 : 1.0 }],
              },
            ]}>
            <View>
              <MaterialCommunityIcons name="brush" size={30} color="black" />
            </View>
          </Pressable>
        </View>

      {sig.length > 0 && (
        <ImageView
          viewStyle={{ width: '100%' }}
          imageStyle={{ width: '100%' }}
          src={{ uri: sig }}
        />
      )}

[DroidZed]

XRecorder_19092024_003400.mp4

Scenario