React/Firebase how to check if username exist in database - reactjs

Question

I'm creating a game that user can login with just a username as a guest and play. Normally, when user visits the website I'm fetching all users data from firebase and assigning it to users state and then if user click Play button I'm checking if username exist.
Where I create function to fetch users using firebase
import { async } from "#firebase/util";
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
import { collection, query, where, getDocs } from "firebase/firestore";
import { db } from '../firebase/auth';
export interface User{
isUser: boolean;
id: number;
username: string
}
interface UserState{
users:User[];
isLoading:boolean;
errorMessage:string;
}
export const fetchUsers = createAsyncThunk("users/fetchUsers", async()=>{
const usersArray:User[] = []
const usersRef = collection(db, "users");
const q = query(usersRef, where("isUser", "==", true))
const querySnapshot = await getDocs(q);
querySnapshot.forEach(doc =>{
const user = doc.data() as User;
usersArray.push(user);
})
return usersArray;
})
const initialState: UserState = {
users:[],
isLoading:false,
errorMessage:""
}
const usersSlice = createSlice({
name:"users",
initialState,
reducers:{},
extraReducers:(builder)=>{
builder.addCase(fetchUsers.pending, (state, action)=>{
state.isLoading = true;
})
builder.addCase(fetchUsers.fulfilled, (state, action)=>{
state.isLoading = false;
state.users = action.payload;
state.errorMessage = "";
})
builder.addCase(fetchUsers.rejected, (state, action)=>{
state.isLoading = false;
state.users = [];
if(typeof action.error.message === "string" ){
state.errorMessage = action.error.message
}
})
}
})
export const usersActions = usersSlice.actions;
export const userReducer = usersSlice.reducer
where I fetch all data
useEffect(() => {
dispatch(guestInputActions.changeInputValue(randomUser))
dispatch(fetchUsers())
}, [])
Where I check if user exsits
const handleGuestLogin = () => {
async function checkIfUsernameExist() {
if (users) {
const existUser = users.find((user: User) => user.username === inputValue.toLowerCase())
if (existUser) {
dispatch(userLoginActions.setLoginStatus(false))
dispatch(userLoginActions.setErrorMessage("This username already exists!"))
return
} else {
dispatch(userLoginActions.checkUserName(inputValue))
}
}
}
checkIfUsernameExist();
}
But I don't think it is efficent way. I want to fetch all users data when user click play button not on initial render. But when I try to do that with async/await my users array always empty before I check if username exists. So, user can play game even username is in already database
What I tried to fetch users data when user click Play button (not on initial render)
useEffect(() => {
dispatch(guestInputActions.changeInputValue(randomUser))
// dispatch(fetchUsers()) commented out this line
}, [randomUser])
const handleGuestLogin = async () => {
async function checkIfUsernameExist() {
if (users) {
const existUser = users.find((user: User) => user.username === inputValue.toLowerCase())
if (existUser) {
dispatch(userLoginActions.setLoginStatus(false))
dispatch(userLoginActions.setErrorMessage("This username already exists!"))
return
} else {
dispatch(userLoginActions.checkUserName(inputValue))
}
}
}
const val = await dispatch(fetchUsers());
checkIfUsernameExist();
}