const Tweet = ({ tweet, checkedList, setCheckedList }) => {
  const [isChecked, setChecked] = useState(false);
  useEffect(() => {
    checkedList === [] && setChecked(false);
  }, [checkedList, isChecked]);
  return (
    <div className="tweet">
      <h3>Name : {tweet.name} </h3>
      <p>{tweet.tweet}</p>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={() => {
          setChecked(!isChecked);
          checkedList.find((e) => e === tweet.id) === undefined
            ? setCheckedList([...checkedList, tweet.id])
            : setCheckedList(checkedList.filter((e) => e !== tweet.id));
        }}
      />
    </div>
  );
}; 

I have a tweet component that has its own state. There is an external checkedList with is basically an array of checked tweet ids. But once I reset the checkedList = [] , I am trying to reset the checked tweets by useEffect. But can't do it. I want all tweets state to be unchecked. What am I doing wrong ?