React Не выполняет повторную визуализацию после изменения состояния?

если React повторно отображает компонент после каждого изменения состояния, почему он не работает с этим кодом, когда я отправляю newUser в handleFormSubmit()? Я вижу, что он обновляется на консоли реагирования, и он отправляется в базу данных, но я вижу его в DOM только после того, как я действительно перезагружаю страницу, не должен реагировать на обновление компонента, когда я изменяю состояние и отправляю форму?

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      newUser: {
        name: '',
        email: '',
        country: '',
        img: ''
      }
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  fetchData() {
    fetch('http://127.0.0.1:3000/')
      .then((res) => {
        return res.json();
      })

      .then(users =>
        this.setState({
          users: users
        }))
      // handle the error
      .catch(err => console.info(err));
  }

  componentDidMount() {
    this.fetchData();
  }

  // this changes all the inputs
  handleInput(e) {
    const { value } = e.target;
    const { name } = e.target;
    this.setState(
      prevState => ({
        newUser: {
          ...prevState.newUser,
          [name]: value
        }
      }),
      () => console.info(this.state.newUser)
    );
  }

  handleFormSubmit(e) {
    e.preventDefault();
    const userData = this.state.newUser;
    this.setState({
      users: [...this.state.users, userData]
    });

    fetch('http://127.0.0.1:3000/register', {
      method: 'POST',
      body: JSON.stringify(userData),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      response.json().then((data) => {
        console.info('Successful' + data);
      });
    });
  }

  render() {
    const { users } = this.state;
    // const users = 0;
    return (
      <div style = {style}>
        {/* <SingUp /> */}

        <div style = {styleForm}>
          <h1>Sign Up!</h1>
          <form onSubmit = {this.handleFormSubmit}>
            <input
                type = "text" placeholder = "name" name = "name"
                value = {this.state.newUser.name} handleChangeEvent = {this.handleInput} onChange = {this.handleInput}
            />

            <input
              type = "text" placeholder = "email" name = "email"
                value = {this.state.newUser.email} handleChangeEvent = {this.handleInput} onChange = {this.handleInput}
            />

            <input
              type = "text"
              placeholder = "country"
              name = "country"
              value = {this.state.newUser.country}
              handleChangeEvent = {this.handleInput}
              onChange = {this.handleInput}
            />

            <input
                type = "text" placeholder = "img url" name = "img"
                value = {this.state.newUser.img} handleChangeEvent = {this.handleInput} onChange = {this.handleInput}
            />

            <button onSubmit = {this.handleFormSubmit}>OK</button>
          </form>
        </div>

        <div style = {style} />
        {users.length > 0 ? (
          users.map((user) => {
            return (
              <div>
                <User
                    key = {user.email} email = {user.email} fullName = {user.full_name}
                    country = {user.country} img = {user.img} created = {user.created_at}
                />
              </div>
            );
          })
        ) : (
          <p> no users found</p>
        )}
      </div>
    );
  }
}

const User = (props) => {
  return (
    <div style = {style}>
      {/* <p>{props.email}</p> */}
      <h4>{props.fullName}</h4>
      <p>{props.country}</p>
      <p>{props.created}</p>
      <img src = {props.img} alt = "" />
    </div>
  );
};

export default App;