Cannot read properties of undefined (reading 'id'). React Js

Im developing my portfolio and a problem just appearin (the error message in Title). i have an array with the data of my projects, that im mapping with some functions to change the style of the cards of the projects. i dont know whats happen. that error message is apearing in this line:
<div className={${style.find((styles) => styles.id === card.id).active ? ‘description-on’ : ‘description-off’}}>
styleID and cardID have acces to the data, i checked hovering the cursor above these codes in VS code and that show me the arrays.
Help :c

import '../Css/projects.css'
import { projectTitle } from '../data/content'
import { useContext,  useState } from 'react'
import { WebContext } from './context/Context'
import {cards} from '../data/projects'

function MyProjects() {

  {/* Usando principio de inmutabilidad / Usign immutability principle */}

  const {languaje} = useContext(WebContext)

  const [style, setStyle] = useState(
    cards.map((card) => ({
      id: card.id,
      active: false
    }))
  )

  function handleClickStyle(id){
    const newStyle = style.map((style) => {
      style.id === id ? {...style, active: true} : style
    })
    setStyle(newStyle)
  }

  return (
    <section className='projects-container'>
      <div className='projects-title'>
        {projectTitle.map((item) => (
          <h2 key={item.id}>  
            {languaje !== true ? item.entext : item.estext}
          </h2>
        ))}
      </div>
      <div className='card-container'>
        {cards.map((card, i) => (
          <div className='card' key={card.id}>
            <div className='img-container' onClick={() => handleClickStyle(card.id)}>
              <img src={card.img} alt={`card ${i}`} title={`card ${i}`} className='image-card' />
            </div>
            <div 
              className={`${style.find((styles) => styles.id === card.id).active ? 'description-on' : 'description-off'}`}
            >
              <h3>
                {card.title}
              </h3>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum id atque tenetur sapiente velit dolores quos, neque quibusdam nisi ex corrupti nesciunt maxime nostrum magnam, consequuntur debitis? Eveniet, eum dolores!
              </p>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}

export default MyProjects

i tried checking if the card.id has data with a {<p>{card.id}</p> and it render well. xd

>Solution :

You need to return newStyle in your map method currently your function is not returning anything, Edit your handleClickStyle Like this:

function handleClickStyle(id) {
  const newStyle = style.map((style) => {
    return (style.id === id ? { ...style,
      active: true
    } : style)
  })
  setStyle(newStyle)
}

Or you just need to remove the curly brackets in front of the map method.