Почему значение clientHeight элемента <li> не меняется при прокрутке?

Я пытаюсь скрыть элемент <li></li>, когда он переполняется (во время прокрутки и непосредственно перед прокруткой после добавления некоторых продуктов в корзину), однако clientHeight в overflowingRef, который ссылается на элемент <li></li>, не изменяется, когда его содержимое переполненный. Любая идея, что я делаю неправильно?

См. код для справки ниже:

import React, {useState, useRef, useEffect} from 'react';
import products from './mock.json';

export default function App() {
  return (
    <div style = {{display: 'flex', flexDirection: 'row'}}>
      <ShoppingCart products = {products} />
    </div>
  );
}
function List({products, title, addProduct, removeProduct}) {
  return (
    <div
      style = {{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'start-end',
      }}
    >
      {title}
      <ul
        style = {{
          listStyle: 'none',
          paddingInlineStart: '0px',
          width: '500px',
          height: '260px',
          overflow: 'scroll',
          paddingRight: '10px',
        }}
      >
        {products.length === 0 ? (
          <div>No products</div>
        ) : (
          products.map(({category, price, stocked, name}, index) => (
            <SuspendDisplayIfOverflowing>
              {ref => (
                <li
                  style = {{
                    padding: '10px',
                    border: '1px solid blue',
                    display: 'flex',
                    justifyContent: 'space-between',
                    height: '18px',
                    overflow: 'scroll',
                  }}
                  ref = {ref}
                  key = {price}
                >
                  <div style = {{color: `${stocked ? 'green' : 'red'}`}}>
                    {`${name} - ${category} - available: ${stocked} - price: ${price}`}
                  </div>
                  {addProduct && stocked ? (
                    <button
                      onClick = {() =>
                        addProduct({category, price, stocked, name})
                      }
                    >
                      Add
                    </button>
                  ) : null}
                  {removeProduct ? (
                    <button onClick = {() => removeProduct(index)}>Remove</button>
                  ) : null}
                </li>
              )}
            </SuspendDisplayIfOverflowing>
          ))
        )}
      </ul>
      <Total prices = {products.map(({price}) => getCleanPrice(price))} />
    </div>
  );
}

function ShoppingCart({products}) {
  const [productsInCart, manipulateProduct] = useState([]);
  const addProduct = product =>
    manipulateProduct(productsInCart.concat(product));
  const removeProduct = productIndex =>
    manipulateProduct(
      productsInCart.filter((_, index) => index !== productIndex),
    );

  return (
    <>
      <List
        title = "Available Products"
        products = {products}
        addProduct = {addProduct}
      />
      <List
        title = "Shopping Cart"
        products = {productsInCart}
        removeProduct = {removeProduct}
      />
    </>
  );
}

function Total({prices}) {
  const total = prices.reduce((accum, item) => (accum += parseFloat(item)), 0);
  return <div>Total amount to pay: {total.toFixed(2)}</div>;
}

function getCleanPrice(price) {
  return price.slice(1);
}

function SuspendDisplayIfOverflowing(props) {
  const overflowingRef = useRef(null);
  useEffect(() => {
    console.info(
      'oveflowing scroll height',
      overflowingRef.current.scrollHeight,
    );
    console.info(
      'oveflowing client height',
      overflowingRef.current.clientHeight,
    );
    console.info(
      'oveflowing client height',
      overflowingRef.current.offsetHeight,
    );
    console.info(overflowingRef.current);
  }, [overflowingRef]);
  return props.children(overflowingRef);
}