fixed order form not resetting

frontend/src/app/page.tsx

@@ -18,23 +18,27 @@ const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 export default function Home() {
   const [email, setEmail] = React.useState<string>("");
   const [order, setOrder] = React.useState<string>("");
-
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [showPortal, setShowPortal] = React.useState(false);
-  const handleModal = () => {
-    setShowPortal(!showPortal);
-  };
-
+  const [records, setRecords] = React.useState<any>([]);
+  const [formValues, setFormValues] = React.useState({
+    emails: "",
+    orders: "",
+  });
 
   async function newOrder(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    const response = await fetch("http://192.168.50.107:5580/new-order", {
+    const formData = new FormData(event.currentTarget);
+    const payload = Object.fromEntries(formData);
+    // console.log(payload)
+    // console.log(JSON.stringify(payload))
+    // console.log({email:formData.get("email"), order:formData.get("order")})
+
+    // const response = await fetch("http://192.168.50.107:5580/new-order", {
+    const response = await fetch("http://localhost:5080/new-order", {
       method: "POST",
       headers: {
-        'Content-type': 'application/json',
-    },
-      body: JSON.stringify({email:email, order:order }),
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify(payload),
     })
       .then((response) => response.json())
       .then((data) => {
@@ -43,6 +47,12 @@ export default function Home() {
       .catch((error) => {
         console.error(error);
       });
+
+    setRecords([...records, formValues]);
+    setFormValues({
+      emails: "",
+      orders: "",
+    });
   }
 
   return (
@@ -60,13 +70,6 @@ export default function Home() {
         <MenuCard Menu={Product} />
       </div>
 
-      {/* <div>
-        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-        <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-          Fancy Modal
-        </Modal>
-      </div> */}
-
       <form
         className="mt-10 flex flex-col w-full items-center gap-4"
         // action={async (formData) => {
@@ -78,17 +81,26 @@ export default function Home() {
         <input
           className="h-14 px-4 rounded-lg border-black bg-slate-600 lg:w-1/3 md:w-1/2 text-[#EEEEEE]"
           type="email"
-          onChange={(e) => setEmail(e.target.value)}
+          // onChange={(e) => setEmail(e.target.value)}
+          value={formValues.emails}
+          onChange={(e) =>
+            setFormValues({ ...formValues, emails: e.target.value })
+          }
           required
           maxLength={500}
           placeholder="Your email"
-          name="senderEmail"
+          // name="senderEmail"
+          name="email"
         />
 
         <textarea
           className="h-52 my-3 rounded-lg lg:w-1/3 md:w-1/2 bg-slate-600 p-4 text-[#EEEEEE]"
           name="order"
-          onChange={(e) => setOrder(e.target.value)}
+          // onChange={(e) => setOrder(e.target.value)}
+          value={formValues.orders}
+          onChange={(e) =>
+            setFormValues({ ...formValues, orders: e.target.value })
+          }
           placeholder="Your order"
           required
           maxLength={500}