feat: handle masking in textfield component when user deletes some characters from middle of the text

[gmukul01]

Description

Handle masking in textfield component when user deletes some characters from middle of the text

Solution you'd like

Provide a clear and concise description of the feature behaviour.

Alternatives you've considered

Provide a clear and concise description of any alternative solutions or features you've considered.

Additional context

I was trying this solution but it needs more refactoring and other edge cases to be covered

//TODO: Handle the case when the user deletes the character in the middle of the mask
    const cursorPosition = selectionStart || 0;

    event.target.value = maskedValue;

    value.match(/[^a-zA-Z0-9]/) &&
        cursorPosition > 0 &&
        cursorPosition < maskedValue.length &&
        !/[^a-zA-Z0-9]/.test(maskedValue[cursorPosition - 1]) &&
        event?.target?.setSelectionRange(cursorPosition, cursorPosition);

    if (
        value.match(/[^a-zA-Z0-9]/) &&
        cursorPosition > 0 &&
        cursorPosition < maskedValue.length &&
        /[^a-zA-Z0-9]/.test(maskedValue[cursorPosition - 1])
    ) {
        const indexOf = maskedValue.substr(cursorPosition - 1).match(/[a-zA-Z0-9]/);
        if ((indexOf?.index || 0) > 0) {
            const position = (indexOf?.input || '').length === (indexOf?.index || 0) + 1 ? indexOf?.index || 0 : (indexOf?.index || 0) - 1;
            event?.target?.setSelectionRange(cursorPosition + position, cursorPosition + position);
        }
    }