title: Set distinct prop for each child in react for animation
body: <p>I made a card component as so:
  <a href="https://i.stack.imgur.com/Ln5RJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ln5RJ.png" alt="enter image description here" /></a></p>
  <p>and I mapped it thrice.</p>
  <p>when clicked the card should open as so:
  <a href="https://i.stack.imgur.com/RrMSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RrMSV.png" alt="enter image description here" /></a></p>
  <p>I've set an setIsOpen pro for the child to return a boolean whether the card is open or not so I can set the row to have 1 column instead of three.</p>
  <p>but if i click on another card while the other one is opened it sets the boolen to false and I would have 3 columns while cards are still open as so:
  <a href="https://i.stack.imgur.com/rEg2y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rEg2y.png" alt="enter image description here" /></a></p>
  <p>any logic turn for this problem?
  below is the code:</p>
  <p>Card code:</p>
  <pre><code>export default function CardBox(props) {
      const handleOpen=()=&gt;{
          setIsOpen(!isOpen)
          props.setIsOpen(!props.isOpen)
      }
  const [isOpen, setIsOpen] = useState(false);
      return (
      &lt;motion.div transition={{layout:{duration:1, type:&quot;spring&quot;}}} className={styles.root}&gt;
      &lt;motion.div transition={{layout:{duration:1, type:&quot;spring&quot;}}} 
      layout 
      onClick={()=&gt;handleOpen()} 
      className={[`${styles.card} ${isOpen? styles.orange +&quot; &quot;+ styles.alignStart :'' }`]}
      style={{borderRadius:&quot;1rem&quot;, boxShadow:'0px 10px 30px rgb(0,0,0,0.5)'}}&gt;
          &lt;motion.h2 layout=&quot;position&quot;&gt;
              {props.title}
          &lt;/motion.h2&gt;
          {isOpen &amp;&amp;
          &lt;motion.div initial={{opacity:0}} animate={{opacity:1}}className={styles.paragraph} &gt;
              &lt;p&gt;{props.par1}&lt;/p&gt;
              &lt;p&gt;{props.par2}&lt;/p&gt;
          &lt;/motion.div&gt;}
          &lt;/motion.div&gt;        
      &lt;/motion.div&gt;
    )
  }
  </code></pre>
  <p>code for index:</p>
  <pre><code> &lt;Row className={[styles.row, styles.cardRow]} xl={isOpen ? 1 : 3} sm={1}&gt;
      &lt;Col&gt;
        &lt;CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={&quot;Values&quot;} par1={*** text ***} /&gt;
  
      &lt;/Col&gt;
  
      &lt;Col&gt;
        &lt;CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={&quot;Values&quot;} par1={*** text ***} /&gt; 
      &lt;/Col&gt;
  
      &lt;Col&gt;
        &lt;CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={&quot;Values&quot;} par1={*** text ***} /&gt;
      &lt;/Col&gt;
   &lt;/Row&gt;
  </code></pre>