Javascript 从Nextjs中的 Select 项收集值，但当单击以处理时，未发生任何情况

我使用Nextjs.我试图从Select Items中收集值，并将它们组合到一个对象中，该对象将由API处理.但当我点击 Select 按钮时，什么也没有发生.我怎么才能解决它呢？这里的代码是: page.jsx个

"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
// import useSession từ next-auth để xử lí authentication
import { useSession } from "next-auth/react";
import Link from "next/link";
import { toast } from "react-toastify";
import { Select, Option } from "@material-tailwind/react";

const Selectt = () => {
  const [subject, setSubject] = useState("");
  const [grade, setGrade] = useState("");
  const [show, setShow] = useState(false);

  const handleSelect = async () =>{
    // e.preventDefault();
    // console.log(subject, classes, difficulty);

    // if (!subject || !grade ) {
    //   toast.error("Hãy chọn đầy đủ các mục!");
    //   return;
    // }

    try {
      const res = await fetch("api/quiz/FilterQuestion", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          subject,
          grade,
        }),
      });

      if (res.status === 400) {
        toast.error("Không tồn tại câu hỏi thỏa mãn", {
          position: toast.POSITION.TOP_CENTER,
          className: "foo-bar",
        });
        router.push("/thithu");
      } else if (res.status === 201) {
        console.log(res.data[0])
        router.push("/home");
        toast.error("Có câu hỏi thỏa mãn!");
      } else {
        router.push("/blog");
        toast.error("Quá khó!");
      }
    } catch (error) {
      toast.error(error);
    }
  }

  return (
    <>
    <div className={`${show?'pointer-events-none opacity-0':''} flex flex-row items-center justify-center w-1/2 gap-10 m-auto`}>
      <Select
        label="Chọn môn"
        color="purple" 
        // error
        animate={{
          mount: { y: 0 },
          unmount: { y: 25 },
        }}
        value={subject}
        onChange={(subject) => setSubject(subject)}
      >
        <Option value="math">Toán</Option>
        <Option value="physics">Vật lí</Option>
        <Option value="chemistry">Hóa học</Option>
      </Select>

      <Select
        label="Chọn lớp"
        color="blue"
        // success
        animate={{
          mount: { y: 0 },
          unmount: { y: 25 },
        }}
        value={grade}
        onChange={(grade) => setGrade(grade)}
      >
        <Option value="9">Lớp 9</Option>
        <Option value="10">Lớp 10</Option>
        <Option value="11">Lớp 11</Option>
        <Option value="12">Lớp 12</Option>
      </Select>
    </div>
    <div className="flex m-auto">
    <button 
        className={`${show?'pointer-events-none opacity-0 text-none':''}bg-green-200 mt-3 p-2 rounded-md m-auto`}
        onClick={()=> handleSelect()}
        >
        Select
    </button>
    </div>
    </>
  )
}

export default Selectt;

route.js个

import Question from "models/Question";
import connectDB from "config/question_database";
import { NextResponse } from "next/server";

export const GET = async (request) => {
  await connectDB();
  const { subject, grade} = await request.json();
  console.log(subject, grade);

  const selectedQuestion = Question.find({subject: subject, class: grade});
  const isSelectedQuestion = selectedQuestion? true: false;

  if (!isSelectedQuestion) {
    console.log("Không tồn tại câu hỏi thỏa mãn");
    return new NextResponse(
      JSON.stringify({ error: "Không tồn tại câu hỏi thỏa mãn yêu cầu" }), 
      { status: 400 }
    );
  } else {
    try {
      console.log("Thành công");
      return new NextResponse.json({data: selectedQuestion}, { status: 201 });
    } catch (error) {
      return new NextResponse(error, { status: 500 });
    }
  }
};

我try 了很多方法来使用MongoDB中的find()方法，但都失败了.