- can get data need to post

src/features/output/components/ChannelFields.tsx

@@ -1,5 +1,7 @@
 import { Field } from "formik";
 import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
 
 type ChannelFieldsProps = {
   values: FormTypes;
@@ -8,9 +10,26 @@ type ChannelFieldsProps = {
     connectTimeoutSeconds?: boolean | undefined;
     readTimeoutSeconds?: boolean | undefined;
   };
+  outputData?: UseQueryResult<FormTypes, Error>;
+  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };
 
-const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
+const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
+  const channelFieldsObject = useMemo(() => {
+    return {
+      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || 5,
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || 15,
+      backOfficeURL: outputData?.propBackofficeURL?.value || "",
+      username: outputData?.propUsername?.value || "",
+      password: outputData?.propPassword?.value || "",
+    };
+  }, [outputData]);
+
+  useEffect(() => {
+    for (const [key, value] of Object.entries(channelFieldsObject)) {
+      onSetFieldValue(key, value);
+    }
+  }, [channelFieldsObject, onSetFieldValue, outputData]);
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="flex flex-row justify-between">