Making group chat function

Question

I have been trying to do this for a while but I dont know what to do at this point. let me preface this, ive been building a chat application that has private messaging (using firebase 7.14.0 and react) I have been trying to make a group chat feature but I dont know what to do. In the app you can create a new group chat which will only have you inside of the chat. from there you can add people to the chat with a menu that pops up all of your contacts you can add to the chat. The problem I am facing is, how to actually add them to the chat.

import React, { useEffect, useState, useCallback } from 'react';
import firebase from "../firebase"
import { NavLink } from 'react-router-dom';
import { Avatar } from '@material-ui/core';
import './Gccontact.css';

const Gccontact = props => {
    const [contact, setContact] = useState()
    const [conversation, setConversation] = useState()

    const getContact = useCallback(async () => {
        const id = props.contact
        const db = firebase.db
        const unsubscribe = db.collection("users").doc(id).onSnapshot(snapshot => {
            setContact(snapshot.data())
        })
        return unsubscribe
    },[props.contact])

    

    useEffect(() => {
        getContact()
 
    }, [props])

    const addtogroup = useCallback(async uid => {
        const members = [contact.uid];
        await firebase.db.collection("conversations").doc('x8DGIeBhW96ziGh0MEGf').update({ members });
    }, []);

   /* db.collection("users").doc(currentUser.uid).update({
        status
    }) */

    return (
      
            <li className="contact">
                {contact && <div className="wrap" onClick={addtogroup}>
                    <span className={`contact-status ${contact.status}`}></span>
                    <div className="img-container">
                        <Avatar src={contact.profilePicture} alt={contact.name + " Profile Picture"} />
                    </div>
                    <div style={{display: "inline-block"}} className="meta">
                        <p className="display-name">{contact.name}</p>
                        {props.recent && <p className="preview">
                            {props.recent?.sender === firebase?.auth?.currentUser?.uid && <span>You: </span>} 
                            {props.recent?.attachments?.length === 0 ? props.recent?.body : "Picture"}
                        </p>}
                    </div>
                </div>}
            </li> 
        
    );
}

export default Gccontact;

I know this is alot of code but I dont even know where to start, I have a function called addtogroup which takes the members (the contact you clicked on) and adds them to the chat. A few problems here "contact.uid" is undefined but has no problem rendering contact.name, I tried to change it to contact.name but still got the error. Also I dont know where to start on

await firebase.db.collection("conversations").doc('x8DGIeBhW96ziGh0MEGf').update({ members });

the doc that I have hard coded into it is a set group chat because I dont know where to begin with putting that inside a var. One last thing too, when it "updates" the members it gets rid of all the old members and adds only that one member (I tried this out by having a set user ID which is why it didnt throw me the error from earlier). I tried .set too and it threw me an error.