A use case when user enters a number in one input box I need to prefill a substring of it to another input box

[Kritica-rani]

The issue is I'm using watch and it is triggered on each keystroke, so the performance is getting hampered. what would be the best way to handle it. I need to show the values in real time, I thought of debouncing but watch doesn't work with debounce.

`   <Controller
            name={fieldName}
            control={control}
            render={({ field, fieldState }) => (
                <FormControl fullWidth margin="normal">
                    <TextField
                        id={fieldId}
                        disabled={fieldDisabled}
                        inputRef={register}
                        label={fieldLabel}
                        autoComplete='off'
                        error={!!fieldState.error || false}
                        sx={{ width: fieldWidth }}
                        InputLabelProps={{ required: isFieldRequired }}
                        inputProps={fieldType === 'number' ? { readOnly: fieldReadOnly, type: inputType, ...defaultInputProps  } : { readOnly: fieldReadOnly} }
                        type={fieldType}
                        value={field.value}
                        onChange={async (e: any) => {
                            field.onChange(e);
                            trigger(fieldName);
                        }}
                        onFocus={preventWheelDefault}
                        {...textareaProps}
                    />
                    {fieldState.error && (
                        <FormHelperText variant="standard" error id="outlined-weight-helper-text">
                            {fieldState.error?.message}
                        </FormHelperText>
                    )}
                </FormControl>
            )}
        />`

    The controller is a common componennt