Why is the checkbox checked value not changing?

I have a react component in Filter.js which acts as a filter and have the following code:

const filter = (props) => {
  const dataArray = [];
  for (const key in props.chapter) {
    const data = props.chapter[key][0][0];
    dataArray.push(
      <li key={key}>
        <div>
          <GreyCheckbox
            value={data.verse.number}
            onChange={props.changeHandler}
          />
          <p>{data.verse.englishName}</p>
        </div>
      </li>
    );
  }

  return (
    <div className="filter">
      <div className="filterTitle">Filter</div>
      <div>
        <ul>
          {dataArray.map((data) => {
            return data;
          })}
        </ul>
      </div>
    </div>
  );
};

I have the onChange={props.changeHandler} which is passed in my App.js as the following handler:

const filterHandler = (event) => {
    if (event.target.checked) {
      setFilterView({
        ...filterView,
        [event.target.value]: chapters[event.target.value],
      });
      console.log('got it checked');
    } else {
      console.log('it was unchecked');
    }
    //console.log(event.target.checked);
  };

The issue I am having is that when the setFilterView code is present the checkbox does changed to a checked state. When that is removed and it is only the console.log statement the box gets checked. What am I doing wrong in how I setup the handler?