How to update state in React to equal an array

Question

https://stackblitz.com/edit/react-kgbnnd?file=src/App.js

I've created a demo of my problem above.

I'm trying to update state based on an array that changes when user clicks check-boxes. I'm trying to filter the products shown on an online store page.

The array is updating correctly, but as I try to update state it doesn't work - the array always holds one value only.

If I dont use setCategories(selectedCategories) the issue does not occur. Any idea how I can successfully update my state?

import React, {useState} from "react";
import "./style.css";

export default function App() {
  const [categories, setCategories] = useState([])
  let selectedCategories = []

  const data = [{
    id: 1,
    value: 1,
    title: "Shoes",
  },
  {
    id: 2,
    value: 2,
    title: "Hats",
  },
  {
    id: 3,
    value: 3,
    title: "Pants",
  },
  {
    id: 4,
    value: 4,
    title: "Shirts",
  },]

  const removeCategory = (arr, value) => {
    let index = arr.indexOf(value)
    if (index > -1) {
      arr.splice(index, 1)
    }
    return arr
  }

  const handleChange = (e) => {
    const value = e.target.value
    const isChecked = e.target.checked

    isChecked
      ? selectedCategories.push(value)
      : removeCategory(selectedCategories, value)

    setCategories(selectedCategories)
  }
  
  return (
    <div>
       <h2>Categories</h2>
          {data?.map((item) => (
            <div className="inputItem" key={item.id}>
              <input
                type="checkbox"
                id={item.id}
                value={item.id}
                onChange={handleChange}
              />
              <label htmlFor={item.id}>{item.title}</label>
            </div>
          ))}
    </div>
  );
}