title: useState with condition inside a map
body: <p>I have the following state</p>
  
  <pre><code>const [thumbnail, setThumbnail] = useState({
    id: null,
    image: 'https://via.placeholder.com/200x100'
  });
  </code></pre>
  
  <p>I can set the thumbnail in my <code>handleChange</code> function like</p>
  
  <pre><code>fetch(`/category/${id}`, {
    method: 'PUT',
    body: formData
  })
    .then(res =&gt; res.json())
    .then(response =&gt;
      setThumbnail({ id: response.id, image: response.thumbnail })
    );
  </code></pre>
  
  <p>How can I get a thumbnail to display in a map like</p>
  
  <pre><code>{data &amp;&amp;
    data.map((category: CategoryInterface) =&gt; (
      image={}
  
  &lt;input
    accept="image/*"
    hidden
    ref={ref =&gt;
      (inputRefs[
        category.id
      ] = ref as HTMLInputElement)
    }
    type="file"
    onChange={e =&gt; handleChange(e, category.id)}
  /&gt;
  &lt;IconButton
    onClick={() =&gt; handleClick(category.id)}
  &gt;
  
  </code></pre>
  
  <p>So basically I would like to display <code>category.thumbnail</code> by default and the placeholder if it doesn't exists, if I change a thumbnail it should only change the thumbnail for the one that I changed but if I set the <code>thumbnail</code> state inside <code>image={}</code> it would change all the thumbnails to the one that I set, is there a way to only change that specific thumbnail?</p>