Client Data - Copy this React, Tailwind Component to your project

Const capabilitiesData = [ { id: 1, imageSrc: "/clients/dazzle.png", description: "Dazzle Innovating the future of technology and design." }, { id: 2, imageSrc: "/clients/woodpecker.png", description: "Woodpecker Experts in crafting sustainable wooden products." }, { id: 3, imageSrc: "/clients/denim.png", description: "Denim Leading the fashion industry with premium denim apparel." }, { id: 4, imageSrc: "/clients/rickson.png", description: "Rickson Pioneers in high performance automotive solutions." }, { id: 5, imageSrc: "/clients/tg.png", description: "TG Transforming gaming experiences with cutting edge innovation." }, { id: 6, imageSrc: "/clients/dl.png", description: "DL Delivering excellence in logistics and supply chain management." }, { id: 7, imageSrc: "/clients/dh.png", description: "DH Specialists in modern home and lifestyle solutions." }, { id: 8, imageSrc: "/clients/countrydenim.png", description: "Country Denim Redefining casual wear with country inspired denim." }, ]; const Capabilities = () => { return ( <div className="px 6 md:px 12 py 10 lg:px 24"> <h2 className="text 3xl font bold text center mb 10 text [#02579a]">OUR MAIN CLIENTS</h2> <div className="grid grid cols 2 md:grid cols 3 lg:grid cols 4 gap x 6 gap y 16 place items center justify center"> {capabilitiesData.map((item) => ( <div key={item.id}> <div className="bg white shadow hover:shadow md hover:shadow black/30 hover:cursor pointer shadow black/20 border 2 hover:border 2 border white hover:border [#02579a] rounded md px 16 transition all duration 500 ease out"> <img src={item.imageSrc} className="w 36 object contain h 36" width="100%" alt={item.imageSrc} /> </div> </div> ))} </div> </div> ); }; export default Capabilities; i need when click any any i want show that information in modal