The data is submitted to the database if I press submit twice, and it can not submit data continuously by pressing the submit button

As you saw in the title I'm having problem with submitting a data into my firebase database. I'm currently working on creating a seat booking system, and my problem came from here.

I coded such that the user can choose the performance and a seat of that performance. When the user clicks the submit button the chosen values are used to search the location of data field(when user searches performance1 and seat a1, it will access the collection performance1 and document a1). Then the field email is checked whether it is empty or not, such that if empty the user's email is entered so that it is booked. However, unlike what I've anticipated when I chose the seat and performance it did not enter the user email into the database, and when I submit my selection the second time it submits the data. Moreover, when I select a seat that is already occupied at the second submission it replaces the value in the database to user's email. Furthermore, I can not submit my selection of seats more once the email is entered at the second submission, and I can submit my selection again when I refresh my page, which is not what I want ( I want to select seat continuously without refreshing the page).

This is my code.

import { authService, dbService } from "myBase";
import React, { useState } from "react";

const Ticketing = () => {
    //initializes the variables that are going to be taken in, initializing the information that will be selected by the user
    const [performance, selectPerformance] = useState("");
    const [seat, selectSeat] = useState("");
    const user = authService.currentUser;
    const userEmail = user.email;
    const [seatEmail, setSeatEmail] = useState("");
    const [Empty, isEmpty] = useState();

    const onSubmit = async (event) => {
        await dbService.collection(performance).doc(seat).get().then(
            (snapshot) => setSeatEmail(snapshot.data())
            );
            console.log("check");
            console.log(seatEmail);

        if(seatEmail === ""){
            isEmpty(true);
            console.log("empty true");
        }
        else if(seatEmail !== ""){    
            isEmpty(false);
            console.log("empty false");
        }
        console.log(Empty);


        if(Empty === true){
            const ticketingDB = dbService.collection(performance).doc(seat);
            return  ticketingDB.set(
                {email:userEmail}
            )

        }
        else {
            console.log("not available");
        }
        selectPerformance();
        selectSeat();
    } 

    return(
        <div>
             <div onClick={() => selectPerformance("performance-1")}>
                Performance 1
            </div>
            <div onClick={() => selectPerformance("performance-2")}>
                Performance 2
            </div>
            <row>
                <div onClick={() => selectSeat("a1")}>1</div>
                <div onClick={() => selectSeat("a2")}>2</div>
                <div onClick={() => selectSeat("a3")}>3</div>
                <div onClick={() => selectSeat("a4")}>4</div>
            </row>
            <span>{performance}</span>
            <span>{seat}</span>
            <input type="submit" onClick={onSubmit}/>
        </div>

        
        
    )


};
export default Ticketing;