Почему в функцию постоянно передается значения "false"?

import React, {Component} from "react";
import PropTypes from 'prop-types';
import "./starrating.css";
 
class MyStarRating extends Component {
    constructor(props) {
        super(props);
        this.state = {
            quality: 0
        }
        this.changeState = this.changeState.bind(this)
    }
 
    changeState(ind) {
        this.setState({
            quality: ind + 1
        })
        console.log('act')
    }
 
    render() {
        let {allStars} = this.props;
        let {quality} = this.state;
        console.log(quality)
        return (
            <div className="star-rating">
                {[...Array(allStars)].map((item, index) =>
                    <Star
                        key={index}
                        truths={(index < quality) ? true : false}
                        onClick={() => this.changeState(index)}
                        indexer={index}
                        qua={quality}
                    />
                )}
            </div>
        );
    }
}
 
export default MyStarRating;
 
MyStarRating.defaultProps = {
    allStars: 5
}
 
const Star = ({truths, onClick = f => f, indexer, qua}) =>
    <div>
        <div
            className={(truths) ? "star" : "star selected"}
            onClick={onClick}>
        </div>
 
        <div> {indexer + ' < ' + qua + ' # ' + truths}</div>
    </div>
 
 
Star.propTypes = {
    onClick: PropTypes.func,
    truth: PropTypes.bool,
    indexers: PropTypes.number,
    qua: PropTypes.number
}