react 同じ処理が連続して呼ばれる時の挙動

Question

○ボタンを押下したら右に、左ボタンを押したら左に動くカードがあります。
○ボタンを押下した後にすぐに左ボタンを押下すると右に移動して画面から消える前に左に移動してしまいます。
一回ボタンを押したら一番上のカードはその方向に移動するようにしたいです。また連続してボタンを押した時（○ボタンを押下した後に✖️ボタン押下）は
一番上のカードは右に動いて、次のカードが左に動くようにしたいです。
どのように実装したらいいでしょうか？
コード記載