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 } ]);

Estoy extrayendo datos de una base de datos que es como los datos que creé anteriormente con fines ilustrativos

 useEffect(() => { const allPeople = query(collection(db, "people")) onSnapshot(allPeople, (snapshot) => ( setPeople(snapshot.docs.map((doc) => doc.data())) )) return () => { second } }, [])

Estoy actualizando la aplicación con la información de la base de datos.

 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

pero, ¿cómo actualizo mi barra lateral con esta información y cambio el nombre y otra información, cada vez que cambia el nombre en la aplicación principal?

 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>

La aplicación es bastante pequeña. ¿Realmente necesito redux o hay alguna forma de rastrear los cambios con useState hook?