title: Display data in modal
body: <p>I would like to pass several data in a modal. My modal works fine but does not display the data I want. I would like to display the data BY ID, but I get all the data. This is my code :</p>
  <p>App.js :</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  import Modal from &quot;./Modal&quot;;
  import PlayCircleIcon from '@mui/icons-material/PlayCircle';
  
  const App = (props) =&gt; {
      const [image, setImage] = useState([])
  
  
      return (
                  &lt;div&gt;
                      {image.map((image) =&gt; {
                          return (
                              &lt;div key={image.id}&gt;
                                  &lt;img src={...}
                                      alt={image.title}
                                  /&gt;
                                  
                                  &lt;ExpandMoreIcon onClick={handleClick} /&gt;
  
                                  
                              &lt;/div&gt;
                          )
                      })}
                  &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>Modal.js :</p>
  <pre><code>import React from 'react';
  
  const Modal = ({ showModal, image }) =&gt; {
  
      console.log(&quot;result&quot;, image);
  
      return (
  
              &lt;div className=&quot;modal&quot; &gt; 
                      &lt;div className='modal__content'&gt;
                          &lt;h1 className='modal__title'&gt;{image.title}&lt;/h1&gt;
                          &lt;p className='modal__description'&gt;{image.description}&lt;/h1&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
      );
  }
  
  export default Modal;
  </code></pre>
  <p>I think the problem comes from here <code>image={image}</code> in App.js because I get 8 tables in console.log(&quot;result&quot;, movie);</p>