Почему один и тот-же код работает в функции и в классе по разному?

Приветвую, у меня есть список checkBox-сов который создается из массива

 ProjectList.map((item, index) => {
          return (
            <div key={index}>
              <input  
                type="checkBox" 
                name={'check'+index}
                id={'check'+index}
                value={item.checked}
                checked={item.checked} 
                onChange={onChangeInput} />
              <label htmlFor={'check'+index}>{item.name}</label>
            </div>
          );
        })

вот событие которое срабатывает при клике по checkbox

const onChangeInput=({target})=>{
        let arr=ProjectList;
        for (let i=0;i<arr.length;i++)
            if (arr[i].name===target.labels[0].textContent)
            {
                arr[i].checked=target.checked;
                break;   
            }
            setProjectList(arr); 
    }

Как я понимаю состояние checkbox-а должно изменятся, но вот проблема, checkbox не меняется состояние при клике, точенее меняется это можно увидеть если поставить breakpoint в функции события но по после окончания функции checkbox возвращается в исходное состояние такая фигня у меня происходит в функции, а вот в классе точно такой-же код работает нормально. Помогите разобраться плз. Вот более понятный пример