حذف مقادیر داخل array با فیلتر

من این اری رو دارم:

    const data =
    [
        {title:"فروش و نصب شیشه اتوموبیل امین", urlPic:gl} ,
        {title:"اپارتمان 195 متری رحمانیه تک واحدی", urlPic:ho} ,
        {title:"تولید اکاسیو اکاسیف تیرچه فلزی بتنی",urlPic:fo} ,    
        {title:"برد تغذیه سوخته ولی صفحه سالم 42hv37100", urlPic:tv} ,
        {title:"دکوری جواهر کوبی" ,urlPic:za} ,
        {title:"جواهر کاری فروغ کادوییماندگار", urlPic:za1} ,
        {title:"لباس مجلسی سایز44",urlPic:ma} ,
        {title:"مبل مبلمان راحتی چستر باکس", urlPic:mob} ,
        {title:"گلدان سرامیکی با گل طبیعی و پایه گلدان فقط" ,urlPic:fl} ,
        {title:"پیکان وانت مدل 84" ,urlPic:pk} ,
        {title:"اپل سیز 10pro max 256g دو سیم کارت" ,urlPic:ph} ,
        {title:"کیف مجلسی شیک ترند", urlPic:ba},
    ]

حالا میخوام مپ کنم ولی به همراه یک دکمه برای حذف اون ها

 <div className="map-p">
                {data.map((card,index) => { return (
                    <div className="mapdiv" key={`div-${index}`}>
                        <Link to={"/detailscamp"}>
                            <img className="mapimg"  src={card.urlPic} />
                        </Link>
                        <div className="elem">
                            <h2 className="mapp" >
                                {card.title}
                            </h2>
                            <button  className="mapdelet">
                                حذف
                            </button>
                        </div>
                    </div>)})}
            </div> 

حالا سوالم اینکه باید چه چیزی برای باتن بزارم که وقتی انکلیک شد اونقسمت مربوطه از اری رو برام حذف کنه؟