I have an issue with a modified field value not "sticking" to the form upon submission.

I'm creating a form where users can upload an image. After the image is uploaded, the hosting service returns the image URL, which is saved into a state variable with

this.setState({
            imageUrl: info.secure_url
})

In the TextField, I have the value set as

<TextField name='imageUrl' value={this.state.imageUrl}/>

This works fine and shows up on the form, but an issue arises when the form is submitted. The form does not recognize that there is something in that field, and throws an error stating input is required.

The submit function works fine with user entered fields and successfully submits data to the database.

Here is the full code

class SubmitVaccine extends React.Component {
  ...
  state = {
    imageUrl: null,
    imageAlt: null,
  }
  uploadImage = () => {
        ...
        (code to upload image here)
        ...
        if (event === 'success') {
          this.setState({
            imageUrl: info.secure_url
          }
  };

  render() {
    const { imageUrl } = this.state;
    return (
      <Grid>
                ...
                (code to upload image here)
                ...

                <TextField name='imageUrl' value={this.state.imageUrl}/>
                <SubmitField value='Submit' id="btn-custom"/>
                ...
      </Grid>
    );
  }
}

Here are some visuals. Default this.state.imageUrl is set to null, so field shows up empty

After image is uploaded, the image URL shows up because this.state.imageUrl has changed

However, the text field is required and it errors out when the field is empty upon submission. This is exactly what is happening here, but the field is filled! Where should I look for clues on how to solve this?

UPDATE

UPDATE

UPDATE

I found out the form errors out because it submits the original, NOT updated state of imageUrl, which was set to null. null = empty field = error upon submission.

However, we can visually see that the field shows an updated imageUrl. How do I make the form submit the new imageUrl?