replaced standard input with custom InputSuggestions component for organization field

src/components/Directory/ManageDirectory.jsx

@@ -14,10 +14,11 @@ import useMaster, {
 } from "../../hooks/masterHook/useMaster";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import { useBuckets } from "../../hooks/useDirectory";
+import { useBuckets, useOrganization } from "../../hooks/useDirectory";
 import { useProjects } from "../../hooks/useProjects";
 import SelectMultiple from "../common/SelectMultiple";
 import {ContactSchema} from "./DirectorySchema";
+import InputSuggestions from "../common/InputSuggestion";
 
 
 
@@ -25,13 +26,15 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const selectedMaster = useSelector(
     (store) => store.localVariables.selectedMaster
   );
-  const [categoryData, setCategoryData] = useState([]);
+  const [ categoryData, setCategoryData ] = useState( [] );
+  
   const [TagsData, setTagsData] = useState([]);
   const { data, loading } = useMaster();
   const { buckets, loading: bucketsLoaging } = useBuckets();
   const { projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
+  const {organizationList,loading:orgLoading} = useOrganization()
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
@@ -136,6 +139,7 @@ useEffect(() => {
     setSubmitting(true);
     submitContact(cleaned, reset, setSubmitting);
   };
+  const orgValue = watch("organization")
 
   const handleClosed = () => {
     onCLosed();
@@ -160,10 +164,12 @@ useEffect(() => {
 
           <div className="col-md-6  text-start">
             <label className="form-label">Organization</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("organization")}
-            />
+            <InputSuggestions
+          organizationList={organizationList}
+          value={getValues("organization") || ""}
+          onChange={(val) => setValue("organization", val)}
+          error={errors.organization?.message}
+        />
             {errors.organization && (
               <small className="danger-text">
                 {errors.organization.message}