How to individually uncheck checkbox after clicking select all checkbox?

I'm currently rendering a Select All checkbox and a list of checkbox rows. I have a piece of state to monitor if the Select All checkbox has been selected (selectAll) and also isSelected to monitor if each individual checkbox is checked or not and selectedStyles is where the data is stored.

The data from the rows is pushed to an array, and currently when clicking on the checkboxes, the correct data is being pushed and removed from the array however this is not being reflected in the viewable state of the checkbox.

The checkbox that iterates over each row has an isChecked prop however I feel like this is where I'm going wrong, as if this is based on the selectAll boolean then it doesn't allow for the individual checkboxes to be physically unchecked or checked.

Here is the Select All checkbox:

<Checkbox
          onChange={(e) =>
            e.target.checked
              ? (setSelectedStyles(styleRowsIds), setSelectAll(true))
              : (setSelectedStyles([""]), setSelectAll(false))
          }
        />

Here is the individual checkbox rows:

      <Checkbox
        isChecked={
          selectAll
        }
        onChange={(e) => {
          e.target.checked
            ? (setSelectedStyles([...selectedStyles, s.id]),
              setIsSelected(true))
            : (setSelectedStyles(selectedStyles.filter((id) => id !== s.id)),
              setIsSelected(false))
        }}
      ></Checkbox>

Any advice on how to navigate this would be appreciated, thanks in advance!