La liste de réaction n'est pas de nouveau rendu de la table après le tri des éléments dans l'état

class CarRow extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            manufacturer: this.props.passedCar.manufacturer,
            model: this.props.passedCar.model,
            year: this.props.passedCar.year,
            stock: this.props.passedCar.stock,
            price: this.props.passedCar.price,
        }

        this.state.price = this.state.price.toLocaleString(undefined, {maximumFractionDigits: 2})
    }

    handleCount(value) {
        this.setState((prevState) => ({stock: prevState.stock + value}));
    }

    render() {
        return (<tr>
            <td>{this.state.manufacturer}</td>
            <td>{this.state.model}</td>
            <td>{this.state.year}</td>
            <td>{this.state.stock}</td>
            <td>${this.state.price}</td>
            <td>
                <button onClick={() =>
                    this.handleCount(1)}>
                    Increment
                </button>
            </td>
        </tr>)
    }
}


class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            descending: true,
            cars: [
                {
                    "manufacturer": "Toyota",
                    "model": "Rav4",
                    "year": 2008,
                    "stock": 3,
                    "price": 8500
                },

                {
                    "manufacturer": "Toyota",
                    "model": "Camry",
                    "year": 2009,
                    "stock": 2,
                    "price": 6500
                },

                {
                    "manufacturer": "Toyota",
                    "model": "Tacoma",
                    "year": 2016,
                    "stock": 1,
                    "price": 22000
                },

                {
                    "manufacturer": "Dodge",
                    "model": "Charger",
                    "year": 2013,
                    "stock": 2,
                    "price": 16000
                },

                {
                    "manufacturer": "Ford",
                    "model": "Mustang",
                    "year": 2009,
                    "stock": 1,
                    "price": 8000
                },

            ]
        };
    }

    sortCars() {
        var carsSorted = JSON.parse(JSON.stringify(this.state.cars));
        carsSorted.sort((a, b) => (this.state.descending ? b.price - a.price : a.price - b.price));
        this.setState({cars: carsSorted});
        this.setState({descending: !this.state.descending});
    }

    render() {
        return (
            <table>
                <thead>
                <tr>
                    <th>manufacturer</th>
                    <th>model</th>
                    <th>year</th>
                    <th>stock</th>
                    <th onClick={() =>
                        this.sortCars()}>price
                    </th>
                    <th>Option</th>
                </tr>
                </thead>
                <tbody>
                {this.state.cars.map((car) => {
                    return <CarRow key={car.model + '_' + car.year} passedCar={car}/>;
                })}
                </tbody>
            </table>
        );
    };
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>