Not rerender checkbox after clicking on them/ changing internal status

I am trying to create checkboxes but I cannot get them to rerender when I click on them, so for some reason I feel like the setState is not causing React to rerender and I am not sure how to fix it. The code is the following:

import React, { PureComponent } from 'react';                                    
                                                                                 
export const CheckBox = props => {                                               
    return (                                                                     
      <li>                                                                       
       <input key={props.id}                                                     
        onClick={props.handleCheckChildElement}                                  
        type="checkbox"                                                          
        checked={props.isChecked}                                                
        value={props.value}                                                      
        /> {props.value}                                                         
      </li>                                                                      
    )                                                                            
}                                                                                
                                                                                 
export default CheckBox 

and then using them on an array this way:

import React, { PureComponent } from 'react';                                    
import  CheckBox  from './CheckBox';                                             
                                                                                 
class FruitSelect extends PureComponent {                                         
    constructor(props) {                                                         
        super(props)                                                             
        this.state = {                                                           
            fruits: [                                                             
                {id: 1, value: "Apple", isChecked: false},                           
                {id: 2, value: "Orange", isChecked: false},                           
                {id: 3, value: "Banana", isChecked: false}                                                     
            ]                                                                    
        }                                                                        
    }                                                                            
                                                                                 
    handleAllChecked = (event) => {                                              
        let newFruits = this.state.fruits                                          
        newFruits.forEach(fruit => fruit.isChecked = event.target.checked)          
        this.setState({fruits: newFruits})                                         
    }  

   handleCheckChildElement = (event) => {                                       
        let newFruits = this.state.fruits                                          
        newFruits.forEach(fruit => {                                               
            if (fruit.value === event.target.value){                              
                fruit.isChecked = !fruit.isChecked                                 
            }                                                                    
        })                                                                       
        this.setState({fruits: newFruits})                                         
    }                                                                            
                                                                                 
    render() {                                                                   
        return (                                                                 
            <div className="FruitSelect">                                         
                <input type="checkbox"                                           
                       onClick={this.handleAllChecked}                           
                       value="checkedall"                                        
                />                                                               
                <ul> {                                                           
                    this.state.fruits.map((fruit) => {                             
                        return (<CheckBox                                        
                            handleCheckChildElement={this.handleCheckChildElement}
                            {...fruit}                                            
                        />)                                                      
                    })                                                           
                }</ul>                                                           
            </div>                                                               
        );                                                                       
    }                                                                            
}                                                                                
                                                                                 
export default FruitSelect  

but when I try using the component on my App it does not re render when I check the boxes (I can see internally the checked values do change. How canI fix this?