country code changes when another country is seleted

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,13 +107,11 @@ 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>`;
       });
   };
 
@@ -120,6 +120,7 @@ const Main = ({ brdcum }) => {
     allCountry().then((data) => setCountries(Object.keys(data.data))).catch((err)=>console.log(err.message));
   }, []);
 
+
   // useEffect(() => {
   //   myData
   // }, [myData]);
@@ -222,9 +223,7 @@ const Main = ({ brdcum }) => {
                     value={values.country}
                     onChange={onChange}
                     required>
-                    <option
-                      value={""}
-                      onCha>
+                    <option value={""}>
                       Country
                     </option>
                     {countries.length > 0 &&
@@ -255,7 +254,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 +281,7 @@ const Main = ({ brdcum }) => {
                 </div>
               </form>
               {/* Error Tag */}
-              <p id="errText" />
+              <p id="errText"></p>
             </div>
 
             {/* Contact Info */}
@@ -355,7 +353,9 @@ const Main = ({ brdcum }) => {
         </div>
       </section>
       <section className="row_am map_section">
-        <div className="container" />
+        <div className="container">
+
+        </div>
       </section>
     </>
   );