MaskInput -> Unable to erase from last character

[somalChakraborty]

Unable to erase from right to left. Here's a screen recording: https://user-images.githubusercontent.com/103426987/190616200-7e3f084b-d90c-4e62-aa83-e9258d4f0a9d.mov

Here's my implementation:

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
  MaskSymbol,
  isLastFilledCell,
} from 'react-native-confirmation-code-field';
import {useSelector} from 'react-redux';
import ColorPalette from '../globals/ColorPalette';
import {normalizeHeight, normalizeWidth} from '../globals/SizeConfig';

const SplitInputField = prop => {
  const {
    value,
    setValue,
    CELL_COUNT,
    textChangeHandler,
    isMasked,
    alignTo,
    widthPercentage,
  } = prop;
  const isThemeDark = useSelector(
    state => state.themeChangerReducer.isThemeDark,
  );
  const style = styleSheet({
    isThemeDark: isThemeDark,
    cellCount: CELL_COUNT,
    alignTo: alignTo,
    widthPercentage: widthPercentage,
  });
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  const renderCell = ({index, symbol, isFocused}) => {
    let textChild = null;

    if (isMasked) {
      let ui = null;
      if (symbol) {
        ui = (
          <MaskSymbol
            maskSymbol="*"
            isLastFilledCell={isLastFilledCell({index, value})}>
            {symbol}
          </MaskSymbol>
        );
      } else if (isFocused) {
        ui = <Cursor />;
      }
      textChild = (
        <Text style={style.pinEntryText}>
          {ui || (isFocused ? <Cursor /> : null)}
        </Text>
      );
    } else {
      textChild = (
        <Text style={style.pinEntryText}>
          {symbol || (isFocused ? <Cursor /> : null)}
        </Text>
      );
    }

    return (
      <View
        key={index}
        style={[style.pinCellStyle, isFocused && style.pinFocusedCellStyle]}
        onLayout={getCellOnLayoutHandler(index)}>
        {textChild}
      </View>
    );
  };

  return (
    <CodeField
      ref={ref}
      {...props}
      value={value}
      onChangeText={textChangeHandler}
      cellCount={CELL_COUNT}
      rootStyle={style.pinInputBox}
      keyboardType="number-pad"
      textContentType="oneTimeCode"
      renderCell={renderCell}
    />
  );
};

const styleSheet = prop =>
  StyleSheet.create({
    pinInputBox: {
      justifyContent: prop?.alignTo,
      alignItems: 'center',
      width: prop?.widthPercentage,
      marginTop: normalizeHeight(10),
    },
    pinEntryText: {
      color: prop?.isThemeDark
        ? ColorPalette.lighterGreyColor.color
        : ColorPalette.mediumGreyColor.color,
      fontSize: normalizeHeight(20),
    },
    pinCellStyle: {
      borderBottomWidth: 0.3,
      borderColor: prop?.isThemeDark
        ? ColorPalette.lighterGreyColor.color
        : ColorPalette.secondaryColorShade1.color,
      marginRight: normalizeWidth(15),
      width: prop?.cellCount <= 4 ? normalizeWidth(40) : normalizeWidth(25),
      height: normalizeHeight(40),
      lineHeight: normalizeHeight(30),
      justifyContent: 'center',
      alignItems: 'center',
    },
    pinFocusedCellStyle: {
      borderColor: ColorPalette.blackColor.color,
      borderBottomWidth: 1,
    },
  });

export default SplitInputField;

[retyui]

Unable to erase from right to left. Here's a screen recording:

Could you please provide a description for video, I don't understated what went wrong