"value" property in Field is set to an state variable but it doesn't work

Hi, I'm building an update form and the goal is to load the current form data which we get from server in controls.

so I took a piece of code from the samples (here),

and I changed it in order to bind it to a property in state as below:

<Field
    name={"firstName"}
    component={FormInput}
    label={"someLabel"}
    value={this.state.firstName}
    onChange={(e) => this.setState({ firstName: e.target.value })}
/>

and my state is:

state = {
firstName: null
}

and I get some data from server and assign it to the state in componentDidMount method as below:

componentDidMount() {
        axios.get("someURL").then(response => {
            this.setState({ firstName: response.data })
        })
    }

the goal is to get the current value from the server and set it to the control

the problem is i don't see the values of the form when it's rendered.

Thanks

and i also attach the jsx file just in case