🚑 検索条件を変えても、セレクトボックスに値が残る場合がある

components/ui/form/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef } from "react";
 import { GroupBase, SelectInstance } from "react-select";
 import { generateSearchQueryPath } from "libs/url";
 import { Query } from "types/query";
@@ -17,6 +17,7 @@ export type FormProps = {
 
 const Form = ({ query, idolOptions, clotheOptions }: FormProps) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const idolSelectRef = useRef<SelectInstance>(null);
   const clotheSelectRef = useRef<SelectInstance>(null);
 
@@ -32,6 +33,10 @@ const Form = ({ query, idolOptions, clotheOptions }: FormProps) => {
 
     const pagePath = generateSearchQueryPath(type, q);
     router.replace(pagePath);
+  };
+
+  useEffect(() => {
+    const type = searchParams.get("type") as Query["type"];
 
     switch (type) {
       case "idol":
@@ -42,8 +47,11 @@ const Form = ({ query, idolOptions, clotheOptions }: FormProps) => {
         clotheSelectRef.current?.blur();
         idolSelectRef.current?.clearValue();
         break;
+      default:
+        idolSelectRef.current?.clearValue();
+        clotheSelectRef.current?.clearValue();
     }
-  };
+  }, [searchParams]);
 
   return (
     <div className="mb-16 flex justify-center">