How to wait for func?

Question

I have some trouble with my project and I wanna know how to fix it.

const usersData = []; // here I create an array

const Home = ({ id, go, usersRef }) => {

    const getAllUsers = () => {
        usersRef.get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                usersData.push(doc.data()); // here I push values to my array
            });
        })
    }

    getAllUsers(); // here I call my func

    return (
        <Panel id={id}>
            <PanelHeader>Title</PanelHeader>
            <Div>
                <div className='cardContainer'>
                    {
                        usersData.map((character) => // here I work with my array
                            <TinderCard className="swipe" key={character.first_name} onSwipe={(dir) => swiped(dir, character.first_name)} onCardLeftScreen={() => outOfFrame(character.name)} preventSwipe={["up", "down"]}>
                                <div style={{ backgroundImage: "url(" + character.image + ")" }} className="card">
                                    <h3 class="name">{character.first_name}</h3>
                                    <h2 class="age">{character.age} лет</h2>
                                    <h1 class="bio">{character.bio}</h1>
                                </div>
                            </TinderCard>
                        )
                    }
                </div>
                {lastDirection ? <h2 className="infoText">You swiped {lastDirection}</h2> : <h2 className="infoText"/>}
            </Div>
        </Panel>
    );
};

export default Home;

After this code I see nothing. But when I go to next screen and then come back I finally see the result (array) but it was doubled. Because it got values and I couldn't saw them cause getAllUsers completed after Home returns View.

I wanna know how to complete getAllUsers before return and how to prevent double of my array

Thank you!