title: Cloudinary most recent image is overwriting all form images displayed on screen?
body: <p>I am having my issue with my React app, it's a simple form that allows user to upload their images then it will be shown on screen, now when I upload an image what happens is all the images will become one which is the most recent uploaded one.</p>
  <p>the way the app is set up: I have a full crud operation on a react app that stores data in state and saves it in mongodb, I added a url key in the state object, with cloudinary I added another state to store the image uploaded.
  I am trying to see if I can update the state url key value with the value from cloudinary so I would only get the most recent uploaded image.</p>
  <pre><code>    export default function App() {
    const [state, setState] = useState({
      tracks: [{ track:&quot;&quot;,artist:&quot;&quot;, album:&quot;&quot;, year:&quot;&quot;, url:&quot;&quot;}],
      newTrack:{
        track:&quot;&quot;,
        artist:&quot;&quot;,
        album:&quot;&quot;,
        year:&quot;&quot;,
        url:&quot;&quot;,
      },
      editMode: false
    });
  
  const [userState, setUserState] = useState({
    user: null
  })
  
  const [image, setImage] = useState('')
      const FormPage = (props) =&gt; {
  
  const [imageSelected, setImageSelected] = useState('');
  
  const uploadImage = () =&gt; {
      const formData = new FormData()
      formData.append('file', imageSelected)
      formData.append('upload_preset', 'musicimages')
  
      Axios.post(
          '   https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', formData)
      .then((res) =&gt; {
          props.setImage(res.data.url);
        // console.log(res.data.url)
        })
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Iq3P8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iq3P8.png" alt="screenshot of the code displayed on screen" /></a></p>