fix(nameField): imperatively call setDebouncedValue when the value is changed by setFieldValue [EE-5002] (#8468)

Co-authored-by: testa113 <testa113>

app/react/hooks/useDebounce.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useState, useRef } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 export function useDebounce(
   defaultValue: string,
@@ -9,10 +9,13 @@ export function useDebounce(
 
   const onChangeDebounces = useRef(_.debounce(onChange, 300));
 
-  return [searchValue, handleChange] as const;
+  const handleChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      onChangeDebounces.current(value);
+    },
+    [onChangeDebounces, setSearchValue]
+  );
 
-  function handleChange(value: string) {
-    setSearchValue(value);
-    onChangeDebounces.current(value);
-  }
+  return [searchValue, handleChange] as const;
 }

app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx

@@ -1,6 +1,6 @@
 import { useField } from 'formik';
 import { string } from 'yup';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
 import { useDebounce } from '@/react/hooks/useDebounce';
@@ -25,6 +25,10 @@ export function NameField({
 
   const [debouncedValue, setDebouncedValue] = useDebounce(value, setValue);
 
+  useEffect(() => {
+    setDebouncedValue(value);
+  }, [setDebouncedValue, value]);
+
   return (
     <FormControl
       label="Name"