Masking the given number while on typing before clicking on save button

I am developing the SSN number in react native.Now in my code I am masking the number like 123 – 45 – xxxx OR xxx – 45 – 6789 only after clicking the save button.But now I wanted to mask that number like 123 – 45 – xxxx OR xxx – 45 – 6789
while typing the number before any clicking save button.
Note: in my code, I am referring the values of splitby, numOfSplits, pattern, position, mask, length, maskBy through my metadata.

my code

import React from ‘react’;
import {
Controller
} from ‘react-hook-form’;
import {
StyleProp,
ViewStyle
} from ‘react-native’;
import {
useSelector
} from ‘react-redux’;
import {
Icon,
Input,
Layout
} from ‘_atoms’;
import {
Label
} from ‘_organisms’;
import {
fillColor
} from ‘_utils’;
import {
style
} from ‘../style’;

let SystemMask = ({
attribute,
data,
formOptions,
disable
}: any) => {

const {
    name,
    required,
    title,
    info,
    placeHolder,
    validationRegEx,
    defaultValue,
    canUpdate,
    unique,
    splitBy,
    pattern,
    numOfSplits,
    position,
    mask,
    length,
    maskBy,
    ...others
} = attribute;

const {
    control
}: any = formOptions || {};

let regEx = /^(?!(000|666|9))d{3}-?(?!(00))d{2}-?(?!(0000))d{4}$/

const {
    theme
} = useSelector((state: any) => state.app);

let color = fillColor(disable, theme);

const returnSum = (array: any) => {
    let sum = 0;
    array.map((e: any) => {
        sum = sum + e;
    });
    return sum;
};
let total = returnSum(pattern);

let splittedData = "";

// let numOfSplit = pattern.length - 1;

let splitData = (val: any) => {
    let splittedVal = "";
    if (val) {
        let numOfSplits = 0;
        val.split("").map((ele: any) => {
            if (ele === splitBy) {
                numOfSplits++;
            }
        });
        if (val.length <= total + numOfSplits) {
            val.split("").map((each: any, index: any) => {
                let sum = 0;
                pattern.map((e: any, i: any) => {
                    sum = sum + 1 + e;
                    if (index + 1 === sum && each !== splitBy) {
                        splittedVal += "".concat("", splitBy);
                    } else if (index + 1 === sum && each === splitBy) {
                        splittedVal += "".concat("", splitBy);
                    } else if (index + 1 !== sum && each === splitBy) {
                        splittedVal += "".concat("", "");
                    }
                });
                pattern.map((e: any, i: any) => {
                    sum = sum + 1 + e;
                    if (index + 1 !== sum && each === splitBy) {
                        each = "";
                    }
                });
                splittedVal += "".concat("", each !== maskBy ? each : "");
            });
            return splittedVal;
        }
    } else {
        return "";
    }
};

let maskData = (val: any) => {
    let maskedData = "";
    if (val) {
        splittedData = "";
        let numOfSplits = 0;
        val
            .replaceAll(splitBy, "")
            .split("")
            .map((each1: any, index1: any, array1: any) => {
                if (array1[index1 - 1] === splitBy) {
                    numOfSplits++;
                }
                if (
                    index1 + 1 <= length + numOfSplits &&
                    position === ("LEFT" || "left" || "Left") &&
                    each1 !== splitBy
                ) {
                    splittedData += "".concat("", mask ? maskBy : each1);
                } else if (
                    index1 + 1 >
                    val.replaceAll(splitBy, "").length - (length + numOfSplits) &&
                    position === ("RIGHT" || "right" || "Right") &&
                    each1 !== splitBy
                ) {
                    splittedData += "".concat("", mask ? maskBy : each1);
                } else {
                    splittedData += "".concat("", each1);
                }
            });
        splittedData.split("").map((each2, index2) => {
            let sum2 = 1;
            pattern.map((e2: any, i2: any) => {
                sum2 = sum2 + e2;
                if (index2 + 1 === sum2 && each2 !== splitBy) {
                    maskedData += "".concat("", `${splitBy}`);
                }
            });
            maskedData += "".concat("", each2);
        });
        return maskedData;
    } else {
        return "";
    }
};

const handleOnchange = (val: any, onChange: any) => {
    onChange(val);
};

const getMaskValue = (value: any, isDirty: any) => {
    return isDirty ? splitData(value) : maskData(value);
};

return ( <
    Layout style = {
        style.container as StyleProp < ViewStyle >
    } >
    <
    >
    <
    Label isRequired = {
        required
    }
    title = {
        title
    }
    description = {
        info
    }
    /> <
    /> <
    Controller control = {
        control
    }
    name = {
        name
    }
    render = {
        ({
            field,
            fieldState
        }: any) => {
            let {
                onChange,
                value,
                ref
            } = field || {};
            let {
                error,
                isDirty
            } = fieldState || {};
            let {
                message
            } = error || {};

            return ( <
                Input
                // ref={ref}
                placeholder = "123-45-6789"
                testID = {
                    name
                }
                disabled = {
                    disable
                }
                onChangeText = {
                    (value: any) => {
                        onChange(value);
                    }
                }
                // inputProps={{
                //     maxLength: total + numOfSplit,
                //   }}
                onChange = {
                    (val) => handleOnchange(val, onChange)
                }
                value = {
                    getMaskValue(value, isDirty)
                }
                status = {
                    error ? 'danger' : 'primary'
                }
                caption = {
                    error ? message || 'Required' : ''
                }
                accessoryRight = {
                    (props: any) => {
                        if (value) {
                            return ( <
                                Icon {
                                    ...props
                                }
                                fill = {
                                    color
                                }
                                name = {
                                    'close'
                                }
                                disabled = {
                                    disable
                                }
                                onPress = {
                                    () => onChange('')
                                }
                                />
                            );
                        } else return < > < />;
                    }
                }
                />
            )
        }
    }
    rules = {
        {
            required: required,
            pattern: {
                value: validationRegEx || regEx,
                message: 'Enter a valid SSN',
            },
            maxLength: {
                value: 11,
                message: "SSN length should be < 9",
            },
        }
    }
    defaultValue = {
        data || defaultValue || ''
    }
    /> <
    /Layout>
);

};

export default SystemMask;