It works. If is the best way, I do not know. :D

mask_func_hook.ts

/**
This write from left to right
 Patterns example: 
    +## # ## ####-####
    ###.###.###-##
    ##############
    (##) # ####-####
*/

  
import { useCallback } from "react";

interface maskPatterProp {
  pattern: string;
  value: string;
  reverse?: boolean;
  charPattern?: string;
}

interface useMaskReturn {
  doMask: ({}: maskPatterProp) => string;
}

const useMask = (): useMaskReturn => {
  const doMask = useCallback(
    ({
      pattern,
      value,
      reverse = false,
      charPattern = '#'
    }: maskPatterProp): string => {
      const patternArray = reverse
        ? pattern.split("").reverse()
        : pattern.split("");
      const valueArray = reverse ? value.split("").reverse() : value.split("");
      const limitIndexPattern = patternArray.length;

      let resultMask = "";
      let indexValue = 0;
      for (
        let indexPattern = 0;
        indexPattern < limitIndexPattern;
        indexPattern++
      ) {
        const pat = patternArray[indexPattern];

        if (indexValue >= valueArray.length) {
          break;
        }

        if (pat === charPattern) {
          if (valueArray[indexValue]) {
            resultMask = `${resultMask}${valueArray[indexValue]}`;
            indexValue++;
          }
        } else {
          resultMask = `${resultMask}${pat}`;
        }
      }

      return reverse ? resultMask.split("").reverse().join("") : resultMask;
    },
    []
  );

  return {
    doMask,
  };
};

export default useMask;