Не срабатывает useEffect при обновлении компонента

Сломал уже всю голову, буду рад любым подсказкам. Есть корзина с индикатором(когда в корзине что-то есть - он горит, нету - не горит).

Вот функция добавления товаров в корзину, она находится у родителя, а результат прокидывается в саму корзину пропсами.

const addItem = (item, e) => {
const elem = basketItem.find(i => i.name === item.name);
if (elem) {
  elem.quantity += e;
} else {
  basketItem.push({ ...item, quantity: 1 });
}
setBasketItem([ ...basketItem ]);

}

Вот код корзины

function Basket(props) {  



const toggle = () => setIsOpen(!isOpen);

  const [isOpen, setIsOpen] = useState(false);
  const [sum, setSum] = useState(0);
  const [countItem, setCountItem] = useState(false);

  const checkout = () => {
    alert('Ваш заказ был успешно оформлен, ожидайте доставку! Мы знаем где вы живёте ;)')
  }


  useEffect(() => {
    if (props.basketItem.length > 0) {
      setCountItem(true);
    } else {
      setCountItem(false);
    }  
  })


  let counterClass = countItem ? "counter" : "none"

  function renderItems(arr) {
    
const items =  arr.map((item, i) => {

  if(item.quantity == 0) {
    arr.slice(i, 1);
  } else {
    return ( 
      <div 
          key={i}>
              <Row>
                <Col sm="12">
                  <Card body
                  className="inline">
                    <CardTitle tag="h5"
                    className="lh">
                      {item.name} | Количество: {item.quantity} <br />
                      Цена: {item.price}
                    </CardTitle>
                    <Button color="success"
                    size="sm"
                    className="size"
                    onClick={() => props.addItem(item, 1)}
                    >
                      +1
                    </Button>
                    <Button color="danger"
                    size="sm"
                    className="size"
                    onClick={() => props.addItem(item, -1)}
                    >
                      -1
                    </Button>
                  </Card>
                </Col>
              </Row>
      </div>
  )
  }
    
    
});

return (
    <>
        {items}
    </>
)
}

  const itemsDone = renderItems(props.basketItem)
  
  

  return (
    <>
        <div>
          <img src={basket} className="basket" onClick={toggle} />
          <div className={counterClass}></div>
        </div>
        <Offcanvas toggle={toggle} 
        isOpen={isOpen}
        direction="end"
        scrollable>
          <OffcanvasHeader toggle={toggle}>
            Корзина
          </OffcanvasHeader>
          <OffcanvasBody>
            {itemsDone}
          </OffcanvasBody>
          <h5>Сумма товаров в корзине: {sum}</h5>
          <Button className="checkout"
            color="primary"
            onClick={checkout}>
            Оформить заказ
            </Button>
        </Offcanvas>
    </>
  );
}

Дело в том, что при добавлении товара в корзину, индикатор загорается(добавляется класс counter), но если все товары из корзины удалены, то индикатор так и остается гореть, не тухнет. Не понимаю, как так? В пропсах же приходит пустой массив, карточка с товаром пропадает из корзины, значит компонент перересовывается, но при этом индикатор никуда не уходит. Пробовал в useEffect ставить разные зависимости, от пропсов в том числе, но ничего не помогает.