Reactjs – How to make my own input mask with variable value in react

Language used : Js with react, react hook form and material ui

What I want to achieve : I want to create an input with mask. the mask have static value, variables value and user value.

Here is where i have create my "Name" who contain my mask

The mask need to have :

• A static value "vm-"
• One string value that need to be change by the user
• A variable value from another input (tenant = watch(‘tenant’) )
• Three integer value that need to be change by the user

Problematic :
I have created my own mask because I didn’t find any package for my request.
But the problem is : Before the ‘tenant’ value from another input, I need to add a string that the user can change. But before that, I need to have static value ‘vm-‘.

I am lost of how to add the string (now ‘a’ in my code) to a editable value

import React, { useEffect } from 'react';
import { Box, TextField, Typography } from '@mui/material';
import { Controller } from 'react-hook-form';

export const Name = ({ fieldArrayName, index, setValue, watch, control }) => {
  const tenant = watch('tenant');

  useEffect(() => {
    if (tenant) setValue(`${fieldArrayName}.${index}.name`, '');
  }, [tenant]);

  const formatInputValue = (tenant, input) => {
    const tenantFormatted = tenant ? `vm-a${tenant}-` : 'vm-a';
    const inputFormatted = input.slice(tenantFormatted.length);
    return `${tenantFormatted}${inputFormatted.replace(/D/g, '').slice(0, 3)}`;
  };

  return (
    <>
      <Box>
        <Controller
          control={control}
          name={`${fieldArrayName}.${index}.name`}
          defaultValue=""
          rules={{
            required: 'Name is required',
            pattern: {
              value: /^vm-(w+)(d{1,3})-(d{1,3})$/,
              message: 'Need to be "vm-a{tenant}-999"',
            },
          }}
          render={({ field: { value, onChange }, fieldState: { error } }) => (
            <TextField
              label="Name. ex: vm-a{tenant}-100"
              value={value}
              onChange={(e) => {
                const formattedValue = formatInputValue(tenant, e.target.value);
                onChange(formattedValue);
              }}
              error={Boolean(error)}
              helperText={Boolean(error) && error.message}
            />
          )}
        />
      </Box>
    </>
  );
};

What I have already tried :

• To integer react-input-mask with mask=’vm-a{tenant}-999′, working except if ‘tenant’ is equal to 999, it will replace the tenant by empty value because react-input-mask use ‘9’ to say it needs to be an integer.