title: react upload image and set new ref with it
body: <p>I would like to upload an image, show a preview, and use it in the mobilenet machine learning model which as I understand requires me to have it as a ref. So I'm looking to:</p>
  <ol>
  <li>Upload the image</li>
  <li>Set a ref</li>
  <li>Use that ref as a preview</li>
  <li>Use that ref in the ML model</li>
  </ol>
  <p>I am able to upload the image like so (works without issue):</p>
  <pre><code>const UploadButton = ({ handleNewFile, text }) =&gt; (
    &lt;label htmlFor='upload-file'&gt;
      &lt;input style={{ display: 'none' }} id='upload-file' name='upload-file' type='file' accept='image/*' onChange={handleNewFile} /&gt;
      &lt;Fab variant='extended' color='primary' style={{ marginBottom: '.5rem' }} component='span'&gt;
        &lt;UploadIcon /&gt;
        {text}
      &lt;/Fab&gt;
    &lt;/label&gt;
  )
  </code></pre>
  <p>My handle change:</p>
  <pre><code>const handleNewFile = e =&gt; {
      const [file] = e.target.files
  
      console.log('file', file)
  
      // this settting fileRef.current doesn't work, it's not the element like I need
      fileRef.current = file
  
      // mobile net model
      model.classify(fileRef.current).then(pred =&gt; {
        setPrediction(pred[0].className)
      })
    }
  </code></pre>
  <p>And my image which I origionally had a src for without upload capabilities and it worked without issue, but now that I need to allow the user to upload, IDK how to set this ref properly after upload.</p>
  <pre><code>&lt;img ref={fileRef} /&gt;
  </code></pre>
  <p><strong>How can I set the ref after uploading?</strong></p>