I'm trying to update the state of my component when a button is clicked. However, when only one of the buttons is clicked, my input state reflects an object with key input but the value is an empty array when it should be an array of the names of the buttons. This only happens when I select only one of the buttons

Here is my handleClick function:

  const [input, setInput] = useState({input: []});
  const [arr] = useState([]);

  const handleClick = async (event) => {
    event.currentTarget.classList.toggle('selected');
    if (arr.includes(event.target.getAttribute('a-key'))) {
      arr.removeByValue(event.target.getAttribute('a-key'));
    } else {
      arr.push(event.target.getAttribute('a-key'));
    }
    console.log(arr);
    setInput({input: arr});
    console.log(input);
    props.setSelected(input);
  }