Javascript 当我单击一个按钮时，所有按钮都会自动单击

目前，我正在创建一个用于自学react 的静态售票应用程序.我使用Bootstrap进行造型

when I select the ticket count it shows in Seat Select,

const [select,setSelect]=useState(0);
const [seatCount,setSeatCount]=useState(select);
const [toggleSeat,setToggleSeat]=useState(false);

const ticketCountHandler=(e)=>{
    setSelect(e.target.value);
    console.log(e.target.value);
    setSeatCount(e.target.value)
  }

const ticketCount=Array.from({ length: 10 }, (_, index) => index + 1);
  

  const seatCountHandler=(e)=>{
    e.preventDefault();
    setToggleSeat(!toggleSeat); 

    if(!toggleSeat){
       setSeatCount(prev=>prev-1)
    }else{
      setSeatCount(prev=>prev+1)
    }
 }

seat count dropdown menu个

{/*count inputl start */}
              <div className="col-4">
              <select id="count" value={select} onChange={ticketCountHandler} className='form-select'>
                  <option selected disabled hidden>Select Ticket Count(max 10)</option>
                  {ticketCount.map((value) => (
                  <option key={value} value={value}>
                           {value}
                      </option>
                   ))}
                  
                </select>
              </div>
              {/*count input end */}

seat selection model

<button type="button" class="btn form-control" data-bs-toggle="modal" data-bs-target="#seat-count">
  Select Seats
</button>


<div class="modal fade" id="seat-count" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Your Ticket Count {seatCount}</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div className="row">
          <div className="col-1"></div>
          <div className="col-1 m-2"><button className='btn seat-btn disabled bg-danger'>100</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={101} onClick={seatCountHandler}>101</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={102} onClick={seatCountHandler}>102</button></div>
          <div className="col-1"></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={103} onClick={seatCountHandler}>103</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={104} onClick={seatCountHandler}>104</button></div>
          <div className="col-1 m-2"><button className={`btn seat-btn ${toggleSeat?"bg-success":""}`} value={105} onClick={seatCountHandler}>105</button></div>
          <div className="col-1"></div>
          <div className="col-1"></div>
        </div>

现在，当我单击一个按钮时，所有按钮都会突然变色，即使在单击多个按钮后，计数也只更改一次.

我需要帮助来解决这个问题，自从上周我被困在这个问题上，try 了这么多相关的问题，使用chat gpt/bard，看了一些yt视频...仍然无法解决这个问题.