Hello, I am a bit stuck in react forms while updating the state

import React from "react";
import "./styles.css";

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            user: {
                id: [1, 2, 3, 4],
                name: ["john", "wick", "james", null],
                city: ["paris", "berlin", "new york", "sydney"],
            },
            updatedValues: {
                id: null,
                name: null,
                city: null,
            },
        };
        this.updateToApi = this.updateToApi.bind(this);
        this.updateState = this.updateState.bind(this);
    }
    handleSubmit = (e) => {
        e.preventDefault();
    };
    handleUserChange = (e) => {
        const data = { ...this.state.updatedValues };
        data[e.currentTarget.name] = e.currentTarget.value;
        this.setState({
            data,
        });
    };
    updateToApi() {
        //updating the values to api using the this.state.updatedValues
    }
    updateState = () => {
        this.setState({
            updatedValues: {
                id: this.state.user.id,
                name: this.state.user.name,
                city: this.state.user.city,
            },
        });
    };
    render() {
        console.log(this.state);
        return (
            <div className="App">
                {this.state.user.id.map((id, index) => {
                    return (
                        <form onSubmit={this.handleSubmit}>
                            <input
                                type="text"
                                name="id"
                                placeholder="id "
                                defaultValue={id}
                                onChange={this.handleUserChange}
                            />
                            ,
                            <input
                                type="text"
                                name="name"
                                placeholder="name"
                                defaultValue={
                                    this.state.user.name[index]
                                        ? this.state.user.name[index]
                                        : this.state.updatedValues
                                }
                                onChange={
                                    this.state.user.name[index] !== "undefined"
                                        ? this.updateState
                                        : this.handleUserChange
                                }
                            />
                            ,
                            <input
                                type="text"
                                name="city"
                                placeholder="city"
                                defaultValue={this.state.user.city[index]}
                                onChange={this.handleUserChange}
                            />
                        </form>
                    );
                })}
            </div>
        );
    }
}

this is a sample of what I am trying to achieve, I want the form to be filled with the values present in the user state and when I change the values in the text field it should update the whole updatetoApi function so that the db can receive the new values. The problem i faced is that when I change only one values then it will basically send a post request to api with only the one updated value of the respective field and all the other values will be overwrited with null

I have a sample that i tried https://codesandbox.io/s/nice-hodgkin-t20v0