how do i update my app sidebar dynamicaly

  function TinderCards() {
    const [people, setPeople] = useState([
      {
      name: "Model Baby",
      url:"https://www.themodelskit.co.uk/wp- 
        content/uploads/2021/10/shutterstock_1431963185.jpg",
         age:22
  },
  {
   name: "Seema Jaswal",
     url:"https://static.standard.co.uk/2021/06/14/16/euro_2020_live_seema_jaswal_01-1.jpg? 
 width=968&auto=webp&quality=50&crop=968%3A645%2Csmart", 
    age:32
},
{
 name: 'Baby',
 url: '../assets/IMG_20210811_105110_849.webp'
 age: 34
}
]);

I am pullin data from a datebase that is like the data i created above for illustration purposes

 useEffect(() => {
 const allPeople = query(collection(db, "people"))

   onSnapshot(allPeople, (snapshot) => (
     setPeople(snapshot.docs.map((doc) => doc.data()))
   ))

   return () => {
   second
  }
 }, [])

I am updating the app with the information from the database

  return (
    <div>
    <div className='tinderCards__cardContainer'>
    {people.map((person) => (
        <TinderCard className="swipe" key={person.name} preventSwipe={["up, down"]} onClick= 
 {() => {setPer(person.name)}} >
            <div className='card' style={{ backgroundImage: `url(${person.url})`}}>
                <h3>{person.name}</h3>
            </div>
        </TinderCard>
    ))}
    </div>
</div>
 )
}

export default TinderCards

but how do i update my sidebar with this infomatiom and have the name and other infomation change, eachtime the name changes in the main app

   function RightSidebar() {
    return (
      <div className='rightSidebar'>
    <div className='rightSidebar__contents'>
        <h1>About</h1>
        <Card className='rightSidebar__card'>
            <div className='card__nameContents'>
                    <CardHeader className='card__nameAge' title = {name} subheader = {age} 
 avatar = {<VerifiedIcon className='activeIcon verified' />}  />
                    
                <CardHeader className='card__active' title = "active" avatar= 
 {<FiberManualRecordIcon className='activeIcon' />} />
                
            </div>

The app is quite small do i really need redux or is there a way to track the changes with useState hook?