Reactjs 我收到Uncaught TypeError： props.handleSelect is not a function

我正在try 使用Tailwincss和Vite创建自定义组件.在传递函数时，我收到错误消息‘unauture TypeError:pros.handleSelect is not a Function’.

const Navbar = () => {
  const handleSelect = (option) => {
    option == "Home"
      ? console.log(option)
      : option == "View Submissions"
      ? console.log(option)
      : console.log(option);
  };

  return (
    <div
      className={`bg-primary-700 flex min-h-[50px] min-w-[100vh] flex-row items-center justify-between p-[5px] text-white `}
    >
      <div
        onClick={() => {
          navigate("/home");
        }}
        className={`pl-[20px] font-semibold hover:cursor-pointer`}
      >
        MICROTEK
      </div>
      <div className={`mr-[10px] flex flex-row`}>
        <Menu2
          placeholder="Navigate"
          options={["View Submissions", "Home"]}
          onSelect={handleSelect}
        ></Menu2>
      </div>
    </div>
  );
};

对于Menu2

const Menu2 = (props) => {
  const [click, setClick] = useState(false);

  return (
    <div>
      <button
        name={props.name}
        id={props.id}
        required={props.required}
        value={props.value}
        onClick={() => {
          setClick(!click);
        }}
        onChange={props.onChange}
        className={
          `${props.className} ` +
          ` flex min-w-[100px] flex-row items-center  justify-between rounded font-semibold ${
            click ? "bg-primary-700" : "bg-none"
          } border-primary-700 hover:bg-primary-700 border-[2px] pl-[10px]`
        }
      >
        {props.placeholder}
        {click == true ? (
          <img
            src={upIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        ) : (
          <img
            src={downIcon}
            style={{ marginTop: "2px", margin: "9px" }}
            height="10px"
            width="20px"
          ></img>
        )}
      </button>

      <div
        className={`${
          click == true ? "" : "hidden"
        }  animate-ease-out shadow-primary-700 absolute min-h-[40px] min-w-[100px] max-w-[200px] rounded bg-white text-black shadow-md`}
      >
        {props.options?.map((options) => {
          return (
            <div
              className="hover:bg-primary-700 p-[10px] hover:text-white "
              key={options}
              onClick={() => {
                props.handleSelect(options);
              }}
            >
              {options}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Menu2;

我看过其他答案，他们提到使用props或{handleSelect}，这两种答案都不起作用.