如何在ReactJS中基于另一个选择框的值呈现选择框？

import React, { useState } from "react";

const MyComponent = () => {
  const [selectA, setSelectA] = useState("");
  const [selectB, setSelectB] = useState("");

  const handleSelectAChange = (event) => {
    const value = event.target.value;
    setSelectA(value);

    // 根据选择框A的值确定选择框B的可选项列表
    // 这里以一个简单的示例逻辑为例，实际根据需求进行修改
    let options = [];
    if (value === "option1") {
      options = ["option1-b1", "option1-b2", "option1-b3"];
    } else if (value === "option2") {
      options = ["option2-b1", "option2-b2"];
    } else {
      options = [];
    }

    // 如果选择框B的值不在可选项列表中，清空选择框B的值
    if (!options.includes(selectB)) {
      setSelectB("");
    }
  };

  const handleSelectBChange = (event) => {
    const value = event.target.value;
    setSelectB(value);
  };

  return (
    <div>
      <select value={selectA} onChange={handleSelectAChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>

      <select value={selectB} onChange={handleSelectBChange}>
        <option value="">请选择</option>
        {selectA === "option1" && (
          <>
            <option value="option1-b1">选项1-B1</option>
            <option value="option1-b2">选项1-B2</option>
            <option value="option1-b3">选项1-B3</option>
          </>
        )}
        {selectA === "option2" && (
          <>
            <option value="option2-b1">选项2-B1</option>
            <option value="option2-b2">选项2-B2</option>
          </>
        )}
      </select>
    </div>
  );
};

export default MyComponent;