Почему не перерисовывается компонент App при изменении его состояния?

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Title extends React.Component {
  render() {
    return "React App";
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addFruit = this.addFruit.bind(this);
    this.state = {
      fruitList: ["Киви", "Банан", "Яблоки"]
    };
  }
  addFruit() {
    this.setState(prevState => {
      prevState.fruitList.push("Мандаринка");
      return {
        fruitList: prevState.fruitList
      };
    });
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.add}>Добавить 1</button>
        <FruitList
          name={`Список апельсинок (${this.state.fruitList.length})`}
          list={this.state.fruitList}
        />
      </div>
    );
  }
}

class FruitList extends React.Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.state = {
      list: props.list
    };
  }
  add() {
    this.setState(prevState => {
      prevState.list.push("Апельсинка");
      return {
        list: prevState.list
      };
    });
  }
  render() {
    return (
      <div className="fruit-list">
        <h1>{this.props.name}</h1>
        <button onClick={this.add}>Добавить 2</button>
        <ul>
          {this.state.list.map((fruit, index) => (
            <FruitListItem key={index} text={fruit} />
          ))}
        </ul>
      </div>
    );
  }
}

class FruitListItem extends React.Component {
  render() {
    return <li className="fruit-list-item">{this.props.text}</li>;
  }
}

const rootElement = document.getElementById("root");
const titleElement = document.getElementsByTagName("title")[0];
console.log("titleElement", titleElement);
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<Title />, titleElement);