選択肢から選ぶ入力箇所が A, B の 2 つ
B の選択肢は A の選択に依存

const Component = () => {
const [a, setA] = useState("")
const [b, setB] = useState("")

const b_options = {
"": ["", "1"],
"foo": ["", "foo1"],
"bar": ["", "bar1", "bar2"],
}[a]

return (
<div>
<Select
options={["", "foo", "bar"]}
value={a}
onChange={selected => setA(selected)}
/>
<Select
options={b_options}
value={b}
onChange={selected => setB(selected)}
/>
</div>
)
}

A で foo を選ぶと B の選択肢は未入力か foo1 のどちらか
foo1 が選ばれてるときに A を bar に変更したら?

A が bar のときの B の選択肢に foo1 はないので B をリセットする必要がある
b_options が決まったあとに修正済みの B の値を作ってそれを props で渡す

const Component = () => {
const [a, setA] = useState("")
const [b, setB] = useState("")

const b_options = {
"": ["", "1"],
"foo": ["", "foo1"],
"bar": ["", "bar1", "bar2"],
}[a]

const fixed_b = b_options.includes(b) ? b : ""

return (
<div>
<Select
options={["", "foo", "bar"]}
value={a}
onChange={selected => setA(selected)}
/>
<Select
options={b_options}
value={fixed_b}
onChange={selected => setB(selected)}
/>
</div>
)
}

修正済みの B の値は state には入ってないけど save などの関数で参照したい場合に fixed_b を見ればいい

Controlled なコンポーネントで直接 props を渡せる場合はこれでいいけど ライブラリなどでフォームの値を管理してると 直接 props を渡して今の値を指定できないこともある
フォームのオブジェクトの setValue などを呼び出して B の値を変更することになる
更新処理なので副作用になって useEffect の中で呼び出す
これだけのために useEffect はあまりしたくない

A が変わった時点で B の選択肢と B の値が変わることも確定なので A の変更時のイベントで B の選択肢と B の値も更新?

const onChange = selected => {
setA(selected)
const b_options = {...}[selected]
setBOptions(b_options)
setB(b_options.includes(b) ? b : "")
}

B の選択肢は API で取得する可能性もある
onChange で API 呼び出しで選択肢の更新までするのはあまりやりたいものじゃない

変にフォームを管理するよりシンプルに Input 系コンポーネントを扱うほうが楽なことも多い気がしてきた