How do I link images I uploaded to GCS to my React front end?

Question

I'm having a hard time figuring out how to link the files I upload to Google Cloud. I found that the link to the images I'm uploading are formatted like this:

storage.googleapis.com/bucket/image.jpeg

But the name of the image keeps getting randomized upon upload. The authorization link in the bucket on GCS looks like this: https://storage.cloud.google.com/bucket/45jwaxo0ekkmj9sk7ojqyshrtl9l With the Object name being: 45jwaxo0ekkmj9sk7ojqyshrtl9l instead of "image.jpeg"

My front end is written in React and the form responsible for uploading it looks like this:

function Home(){
function handleSubmit(event) {
    event.preventDefault()
    const formData = new FormData();
    formData.append('image', moviepic);
    formData.append('title', moviepic.name);
    fetch('/movies', {
          method: 'POST',
          body: formData
        })

        console.log(formData)
      }

return(
<div id='uploadform'>

      <form onSubmit={handleSubmit}>
<input type="file" name="image"accept="image/png, image/jpeg" onChange={(e) => setMoviepic(e.target.files[0])}/>
                    <input type='submit'/>
            </form> 


<img src = "I'm trying to figure this out" />

</div>
)
}

I want to be able to upload my image files to GCS with their original names in place so I can link them in my image tags in the front end. Any suggestions would be greatly appreciated.

message on server console when I upload the file to gcs