Issue setting up a check filter for my web app

So I'm trying to set up a checkbox filter for a crime app my team and I are making but I am running into an issue where after clicking the checkbox my map function stops working. However, everything renders fine before you click on a checkbox and the state does seem to change via console log.

    const [filter, setFilter] = useState([{id:1, value: "Rape", isChecked: false},
    {id:2, value: "Assault", isChecked: false},
    {id:3, value: "Burglary", isChecked: false},
    {id:4, value: "Arson", isChecked: false},
    {id:5, value: "Robbery", isChecked: false}])

    const handleAllChecks = (event) => {
        filter.forEach(filters => filters.isChecked = event.target.checked)
        setFilter({filter:filter})
        console.log("setFilter", filter);
    }

    const handleChecks = (event) => {
        console.log("event", filter);
        filter.forEach(filters => {
            if(filters.value === event.target.value)
            filters.isChecked = event.target.checked
        })
        setFilter({filter:filter})
    }


    return (
        <div>
            <input type="checkbox" onClick={handleAllChecks} value="checkedall" /> Check / Uncheck All
            <ul>
                {
                    filter.map((filters) => {
                    console.log(filters);
                    return(<CheckBox handleChecks={handleChecks} {...filters}  />)
                })
                }
            </ul>
        </div>
    )
}

This is the component I'm Mapping

    console.log(props.handleChecks);
    return (
      <li>
       <input key={props.id} onClick={props.handleChecks} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
      </li>
    )
}