title: Trying to add multiple images in react , but it only displays one image
body: <p>I am trying to select multiple images, and the images are being selected and stored in the state, but only one image is displayed.Below is the code for the same</p>
  
  <p>//Selecting the image and displaying the image</p>
  
  <pre><code> &lt;div className="md-form mb-5"&gt;
            &lt;input type="file" id="form29" name='images' onChange={e =&gt; pickImage(e)} className="form-control validate" multiple hidden/&gt;
            &lt;button className="btn btn-outline-dark btn-sm" onClick={e =&gt; selectImage(e)}&gt;Pick Image&lt;/button&gt;
          &lt;/div&gt;
                  &lt;div className="row text-center"&gt;
                      {image.length &gt; 0 ?
                      image.map(img =&gt; (
                          &lt;div className="col-md-4" key={img.url}&gt;
                              &lt;img src={img.url} alt={img.name} className="img-fluid"/&gt;
                              &lt;span style={{cursor: 'pointer'}}&gt;
                              &lt;i class="far fa-trash-alt" onClick={e =&gt; deleteImage(img.name, e)}&gt;&lt;/i&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      )) : &lt;p&gt;No Images Picked&lt;/p&gt;}
                  &lt;/div&gt;
  </code></pre>
  
  <p>//Defining the state</p>
  
  <pre><code>const [addDiary, setAddDiary] = useState({date: null, content: null, images: []});
  const [ image, setImage ] = useState([]);
  </code></pre>
  
  <p>//Defining the methods to store and delete image</p>
  
  <pre><code>const selectImage = (e) =&gt; {
          document.getElementById('form29').click();
      }
  
      const deleteImage = (name, e) =&gt; {
          const remainingImage = image.filter(img =&gt; {return img.name !== name});
          setImage(remainingImage);
          const remainingImageState = addDiary.images.filter(img =&gt; 
              {
              return img.name !== name});
          setAddDiary({...addDiary, images: remainingImageState });
      }
  
      const pickImage = (e) =&gt; {
         console.log(e, 'e obj')
          for(const file of e.target.files) {
              const reader = new FileReader();
              reader.onload = (e) =&gt; {
  
                 setImage([...image, {url: URL.createObjectURL(file), name: file.name}]);
                 console.log(e.target.name)
                 setAddDiary({ ...addDiary, images: [...addDiary.images, file]});
                };
                 reader.readAsDataURL(file);
              }
  
          }
  </code></pre>