React native typescript : adding automatic hyphen and mask

I’m doing project in React Native.

1. How can i add hyphen automatically while typing the social security numbers like 123456789 to 123-45-6789.

2. How can i mask the specific number into any symbol from left or right like 123456789 to xxx-45-6789 or 123-45-xxxx.

My code :

import React, {useEffect, useRef} from 'react';import { StyleProp, ViewStyle } from 'react-native';import { Controller } from 'react-hook-form';import { useSelector } from 'react-redux';import { Layout, Input, Icon } from '_atoms';import { fillColor } from '_utils';import { Label } from '_organisms';import { style } from '../style';let Mask = ({ 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);    return (<Layout style={style.container as StyleProp<ViewStyle>}><><Label isRequired={required} title={title} description={info} /></><Controller                control={control}                render={({ field, fieldState }: any) => {                    let { onChange, value } = field || {};                    let { error } = fieldState || {};                    let { message } = error || {};                    return (<Input                            placeholder={placeHolder}                            testID={name}                            disabled={disable}                            onChangeText={(value: any) => { onChange(value); }}                            value={value ? value : ''}                            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 <></>;                            }}                        />                    )                }}                name={name}                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 Mask;