React function enter twice in if condition inside Map function

my function handleAddPoint receive data like this:

data = {colorid,counter}

I call this function from child component called "Qualificatif" who just push data based on a onChange event from a Select input.

Each time i change the value from my select input, the map function inside the function called handleAddPoint go twice in the if condition.

Can you help me ?

Here is the code:

export default class Questionnaire extends Component {

constructor(props){
    super(props)

    this.state ={
        colors:[
            {
                id:1,
                color:"yellow",
                point:0
            },
            {
                id:2,
                color:"green",
                point:0
            },
            {
                id:3,
                color:"red",
                point:0
            },
            {
                id:4,
                color:"blue",
                point:0
            },
        ],
    }

    this.handleAddPoint = this.handleAddPoint.bind(this)
}

handleAddPoint = (data) =>{
    console.log("Data questionnaire",data)
    this.setState(state => {
        state.colors.map(color => 
            {if(color.id === data.colorid)
                color.point += data.counter
                return color
            })
    })
    console.log("couleurs questionnaire",this.state.colors)
}

render() {
    return (
        <div className="questionnaire">
            <Qualificatif data={Q1data} handleaddpoint={this.handleAddPoint}/>
            <Qualificatif data={Q2data} handleaddpoint={this.handleAddPoint}/>
            <Classement data={Q3data} handleaddpoint={this.handleAddPoint}/>
            <Result data={this.state.colors}/>
        </div>
    )
}

}