Вопрос по массивам JSX/React

У меня по нажатию кнопки элементы JSX добавляются и отображаются через массив. Проблема в том что по нажатию checkbox нужно чтоб те кнопки которые находятся в массиве были отключены, тоесть disabled=true. Как это сделать? Код вот:

const [disabledRank, setDisabledRank] = React.useState(true);
const [itemReward,setItemReward] = React.useState([])
const [id,setid] = React.useState(0);
const pushItemReward = () => {
setid((set) => set+1);
setItemReward((reward) => [...reward,id:id, content:<button disabled={disabledRank}></button>]))
}
const enabledRang = ({target}) => {
        setDisabledRank(!target.checked);
}
return(<div>
<div><input type="checkbox" onInput={enabledRang}></input> <button onClick={pushItemReward}>ДОБАВИТЬ</button></div>
<div>
{itemReward.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
</div>
</div>)