fix: Resolve the auto-subject population feature's inconsistent behavior

Author: oluwatobiss

pages/contact.js

@@ -1,21 +1,34 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import ContactUsFormSubscribe from '@/components/ContactUs';
-import ContactUsCards from '@/components/ContactUs/ContactUsCards';
-import styles from '@/styles/pages/contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
+import ContactUsCards from '@/components/ContactUs/ContactUsCards';
+import ContactUsFormSubscribe from '@/components/ContactUs';
+import styles from '@/styles/pages/contact.module.scss';
 export default function ContactUs() {
-  const [message, setMessage] = useState([]);
+  const subjectFilled = useRef(false);
   const searchParams = useSearchParams();
+  const subjectParam = searchParams.get('subject');
+  const [param, setParam] = useState(subjectParam || '');
+  const [message, setMessage] = useState([]);
+
+  function updateSubject(state, value) {
+    subjectFilled.current = state;
+    setParam(value);
+  }
+
+  subjectParam && !subjectFilled.current && updateSubject(true, subjectParam);
+  !subjectParam && subjectFilled.current && updateSubject(false, '');
+
   return (
     <>
       <div className={styles.contactUsContainer}>
         <div className={styles.formWrapper}>
           <div className={styles.formAndDecorations}>
             <Bracket className={bracketStyles.yellowBracket} />
             <ContactUsFormSubscribe
-              subject={searchParams.get('subject')}
+              key={param}
+              subject={param}
               setMsg={setMessage}
             />
             <img