React retrieve checked value in checkbox

I am trying to retrieve the checked values of the checkboxes and save them into array.
I tried :

arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)

But these return type error or undefined values.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
    if (e.target.checked) {
      var arr = [...checkedItems];
      //arr.push(setNewItem(e.target.value.checked));
      setCheckedItems(arr);
      console.log(arr);
    } else {
      checkedItems = "";
    }
    setIsChecked((current) => !current);
  };

return (
    <div className="App">
      <StyleForm>
        <StyleInput
          type="text"
          placeholder="Add"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
        <ButtonAddStyle onClick={() => addItem()}>add</ButtonAddStyle>

        <StyleUl>
          {items.map((item) => {
            return (
              <StyleLi key={item.id}>
                <StyleCheckBox
                  type="checkbox"
                  value={isChecked}
                  onChange={handleChange}
                />
                {item.value}
                {""}
                <ButtonDelStyle onClick={() => deleteItem(item.id)}>
                  X
                </ButtonDelStyle>
              </StyleLi>
            );
          })}
        </StyleUl>
      </StyleForm>
    </div>
  );

arr.push(e.target.checked);

Is the way to go and get rif of :

else {
checkedItems = "";
}

you cannot update a state this way, you will get an error when you try to unchek an input:
>Uncaught TypeError : Assignment to constant variable

Now let's see what you are trying to do you are storing e.target.checked each time an input is cheked so checkedItems will look something like this :

[true, true, true, true, true, true, true, true]

why do you need this ? better is to store the ids of checked items :

const handleChange = (isChecked, id) => {
  var arr = [...checkedItems];
  if (isChecked) {
    arr.push(id);
    setCheckedItems(arr);
  } else {
    setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // delete the id from checkedItems if the corresponding input is unckecked
  }
};

and from jsx :

<StyleCheckBox
  type="checkbox"
  value={item.id}
  onChange={(e) => {
    handleChange(e.target.checked, item.id);
  }}
/>;

Now look at this :

<StyleCheckBox
  value={isChecked} // this line
>

you are mapping through items creating multiple checkBoxes but all of them share the same value. and the value attribute of an input of type checkbox is not what you think it is, learn more here. so you can use value={item.id} to have an unique value for each input and get rid of isChecked useState hook you really don't need it

this could solve your problem.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
  setCheckedItems( prev => [...prev, e.target.checked]);
  setIsChecked((current) => !current);
};