Add List element to favorites - reactjs

Question

So I've created this array of objects and I would like to add some of them to favorites page. I thought I'd create onClick boolean change to each element and once value true object would be added favorites page. First of all, I am not sure if that's the right way to do it and secondly, now I am struggling with the fact that value of boolean in each element in the list is changing with that click instead of desired one. Probably I bit more than I could chew hence I am asking for some guidance.
MeetupList file
import { useState } from 'react'
import classes from './MeetupList.module.css'
import { IState as Props } from '../../pages/AllMeetups'
import Card from '../ui/Card'
interface IProps {
meetups: Props['meetupsy']
}
const MeetupList: React.FC<IProps> = ({meetups}) => {
const [toggle, setToggle] = useState(false)
const toggler = () => {
toggle ? setToggle(false): setToggle(true)
}
const renderList = ():JSX.Element[] => {
return meetups.map((meetup) => {
return(
<Card key={meetup.id}>
<li className={classes.list}>
<div className={classes.image}>
<img src={meetup.image} alt={meetup.title} />
</div>
<div className={classes.listheader}>
<h3>{meetup.title}</h3>
<address>{meetup.address}</address>
<p>{meetup.description}</p>
</div>
<div className={classes.actions}>
<button onClick={toggler}>{toggle ? <span>To Favorite</span>:<span>Not Favorite</span>}</button>
</div>
</li>
</Card>
)
})
}
return (
<ul className={classes.render}>
{renderList()}
</ul>
)
}
export default MeetupList;
All Meetups Page
import React, {useState, useEffect} from 'react'
import MeetupList from '../components/meetups/MeetupList'
import NewMeetupForm from '../components/meetups/NewMeetupForm'
import Popup from '../components/ui/Popup'
//import classes from './AllMeetups.module.css'
import './AllMeetups.css'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCalendarPlus } from '#fortawesome/free-regular-svg-icons'
export interface IState {
meetupsy: {
id: number
image: string
title: string
address: string
description: string
}[]
}
const AllMeetups = () => {
const [meetups, setMeetups] = useState<IState['meetupsy']>([
{
id: 123,
image: 'https://i.imgur.com/i4WpOUM.jpg',
title: 'Car Meetup',
address: 'Baker Street 14',
description: 'EUDM Meetup'
},
{
id: 1233,
image: 'https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395__480.jpg',
title: 'Cooking Show',
address: 'Downtown 14',
description: 'Pizza Cooking Show'
}
])
useEffect(() => {
const data = window.localStorage.getItem('MEETUP_LIST');
if (data !== null) setMeetups(JSON.parse(data))
},[])
useEffect(() => {
window.localStorage.setItem('MEETUP_LIST', JSON.stringify(meetups))
}, [meetups])
const [buttonPopup, setButtonPopup] = useState(false);
return (
<section>
<h1 className='oke'>All Current Meetups</h1>
<MeetupList meetups={meetups} />
<button className='open' onClick={() => setButtonPopup(true)}><FontAwesomeIcon icon={faCalendarPlus} /></button>
<Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
<NewMeetupForm meetups={meetups} setMeetups={setMeetups} />
</Popup>
</section>
)
}
export default AllMeetups