made country input tag to show country but returns country code as value

src/component/Contact/Main.js

@@ -64,7 +64,9 @@ const Main = ({ brdcum }) => {
     country: "",
   }); //initial state values
   const [countries, setCountries] = useState([]); // initial state for country dropdown
+
   const [myData, setMyData] = useState(null);
+
   // Gave a generic name for multiple calls
   const API_CALL = new SiteService(); // instantiating the class
   // API CALL
@@ -92,10 +94,10 @@ const Main = ({ brdcum }) => {
         setMyData(contact);
 
         // Checking for errors
-        if (contact?.data?.status < 1 || contact?.data?.message_id == "")
-          return (errText.textContent =
-            "unable to send your message, please try again");
-        else {
+        if (contact?.data?.status < 1 || contact?.data?.message_id == ""){
+          errText.textContent = "unable to send your message, please try again";
+          response.innerHTML = `<p> SEND MESSAGE </p>`;
+        }else {
           response.innerHTML = `<p> SEND MESSAGE </p>`;
 
           contact_body.innerHTML = `<div class='contact_body animate pop'>
@@ -105,24 +107,19 @@ const Main = ({ brdcum }) => {
           setTimeout(() => {
             navigate("/");
           }, 10000);
-
-          setValues((prev) => ({ ...prev, [e.target.name]: "" }));
         }
       })
-      .catch((error) => {
-        errText.textContent = "unable to send your message, please try again"
-        console.log(error);
+      .catch(() => {
+        errText.textContent = "unable to send your message, please try again";
+        response.innerHTML = `<p> SEND MESSAGE </p>`;
       });
   };
 
   //CALLS THE API AFTER COMPONENT LOADS
   useEffect(() => {
-    allCountry().then((data) => setCountries(Object.keys(data.data))).catch((err)=>console.log(err.message));
+    allCountry().then((data) => setCountries(Object.entries(data.data))).catch((err)=>console.log(err.message));
   }, []);
 
-  // useEffect(() => {
-  //   myData
-  // }, [myData]);
 
   return (
     <>
@@ -222,17 +219,15 @@ const Main = ({ brdcum }) => {
                     value={values.country}
                     onChange={onChange}
                     required>
-                    <option
-                      value={""}
-                      onCha>
+                    <option value={""}>
                       Country
                     </option>
                     {countries.length > 0 &&
                       countries.map((country, index) => (
                         <option
                           key={index}
-                          value={country}>
-                          {country}
+                          value={country[0]}>
+                          {country[1]}
                         </option>
                       ))}
                   </select>
@@ -255,7 +250,6 @@ const Main = ({ brdcum }) => {
                     className="form-control"
                     placeholder="Your message"
                     value={values.message}
-                    errorMessage='words have exceeded 350 characters!'
                     onChange={onChange}
                     maxLength={300}
                     pattern="^[A-Za-z0-9]{5, 300}$"
@@ -283,7 +277,7 @@ const Main = ({ brdcum }) => {
                 </div>
               </form>
               {/* Error Tag */}
-              <p id="errText" />
+              <p id="errText"></p>
             </div>
 
             {/* Contact Info */}
@@ -355,7 +349,9 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container" />
+        <div className="container">
+
+        </div>
       </section>
     </>
   );