refactor: improve key assignment in FrequentSearches and update TextHeader to use async getStateInfo

components/home/FrequentSearches.js

@@ -14,6 +14,7 @@ function FrequentSearches() {
         <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
           {childrenList.map((item, idx) => (
             <Link
+              key={item.id || idx}
               href={{
                 pathname: "/doctors",
                 query: {
@@ -21,7 +22,7 @@ function FrequentSearches() {
                 },
               }}
             >
-              <li key={idx}>
+              <li>
                 <Button
                   variant="contained"
                   color="secondary"

components/home/TextHeader.js

@@ -2,8 +2,8 @@ import { getStateInfo } from "@/lib/getStateInfo";
 import AText from "../icons/AText";
 import BText from "../icons/BText";
 
-function TextHeader() {
-  const { matchedCity } = getStateInfo();
+async function TextHeader() {
+  const { matchedCity } = await getStateInfo();
 
   return (
     <div className="z-[50]">