Adicionando formatação dinâmica CPF ou CNPJ no input de acordo com a quantidade de números informados

input.jsx

import React, { useCallback } from 'react';

const Input = ({ ...props }) => {

    const formatarCampo = useCallback(event => {
        let value = event.currentTarget.value;
        if (value.length <= 11) {
            value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g,"\$1.\$2.\$3\-\$4");
        } else {
            value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g,"\$1.\$2.\$3\/\$4\-\$5");
        }
        event.currentTarget.value = value;
    });
    
    const removerFormatacao = useCallback(event => {
        let value = event.currentTarget.value;
        value = value.replace(/\D/g, "");
        event.currentTarget.value = value;
    });


    return <div>
        <input { ...props } onFocus={removerFormatacao} onBlur={formatarCampo} />
    </div>;
}

export default Input;