Удаление элементов из массива с отображаемыми блоками React

не получается удалить элемент из массива по нажатию кнопки . Кнопка классом "button-krestik" должна удалять отображаемый блок из массива вместе с которым она попала в этот массив. Что я делаю не так?

const [itemReward,setItemReward] = React.useState([])
   let id = 0;
   const pushItemReward = () => {
     id++;
     setItemReward((reward) => [...reward,{id:{id},content: (<div className="main-block">
     <div className="App-header-top-left"><input type="number" name="lvlinput" placeholder="LVL" className="text-area-minimal" min="1" max="999" value={val} onChange={setNumber}></input></div>
     <div className="App-header-top-right">
     <select id="participant" name="countires" className="input-color"><option value="">ADMINISTRATOR</option>
  <option>MODERATOR</option>
  <option>GLAVA</option>
  </select>
       <button className="button-krestik"><FontAwesomeIcon icon={["fas", "times"]} color="white" onClick={() => removeItemReward({id})}/></button>
     </div>
         </div>)}])
   }
   const removeItemReward = (id) => {
     setItemReward((reward) => reward.filter((reward) => reward.id !== id));

   }
return(
<React.Fragment>
      {itemReward.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
    </React.Fragment>
)