Im trying to update an array field of usernames in firebase using react.But for some reason my array is undefined.What im doing wrong?

const[saveusername,SetsaveUsername]=useState('')
const usernameRef=db.collection('chats')
const [usernameSnapshot]=useCollection(usernameRef)
const[usernameArray,SetusernameArray]=useState([])
console.log(usernameArray)



const SaveUsername=()=>{
   if(!!usernameSnapshot?.docs?.[0]?.data()?.usernames){
      SetusernameArray(usernameArray.concat(usernameSnapshot?.docs?.[0]?.data()?.usernames))
      console.log(usernameArray)
        db.collection('chats').doc(router.query.id).update({
            usernames:usernameArray
        })
   }
   else{
    db.collection('chats').doc(router.query.id).update({
        usernames:[{email:recipient?.email,username:saveusername}]
    })
   }    
} 

}

enter image description here