I've run into the issue of improperly rendering elements and I don't know how to dig myself out of this hole.

  const CartItem: React.FC<CartItemProps> = ({ name, image, price, quantity, id, removeFromCart }) => {
    const [currentQuantity, setQuantity] = useState(quantity);
  
    useEffect(() => {
      setQuantity(quantity);
    }, [quantity]);
  
    const handleQuantityChange = (newQuantity: number) => {
      setQuantity(newQuantity);
      updateCartItem(id, newQuantity);
    };
  
    return (
      <span className="flex flex-row p-4 m-4 bg-primary-1000 rounded-lg">
        <Image src={image} width={150} height={150} alt="Cart Item Image" />
        <span className="p-4 pt-1 flex flex-col justify-center items-center gap-2">
          <p className="font-bold top-0 p-2">{name}</p>
          <p>${price}</p>
        </span>
        <span className="flex flex-row justify-center items-center gap-4">
          <Quantity
            quantity={currentQuantity}
            lowerLimit={1}
            upperLimit={99}
            increase={() => handleQuantityChange(currentQuantity + 1)}
            decrease={() => handleQuantityChange(currentQuantity - 1)}
          />
          <p>Total: {formatCurrency(currentQuantity * price)}</p>
        </span>
        <button onClick={() => removeFromCart(id)}>Remove</button>
      </span>
    );
  };


  const YourCart = () => {
    const [cartItems, setCartItems] = useState<CartItemProps[]>([]);
    const [loading, setLoading] = useState(true);
    const [total, setTotal] = useState(0);
  
    useEffect(() => {
      const fetchCartItems = async () => {
        try {
          const items = await getCart();
          setCartItems(items);
          setLoading(false);
        } catch (error) {
          console.error('Error fetching cart items:', error);
          setLoading(false);
        }
      };
  
      fetchCartItems();
    }, []);
  
    useEffect(() => {
      const updateTotal = async () => {
        try {
          const cartTotal = await getCartTotal();
          setTotal(cartTotal);
        } catch (error) {
          console.error('Error updating total:', error);
        }
      };
  
      updateTotal();
    }, [cartItems]);
  
    const handleRemoveFromCart = async (itemId: number) => {
      try {
        removeCartItem(itemId);
        const updatedCartItems = cartItems.filter(item => item.id !== itemId);
        setCartItems(updatedCartItems);
      } catch (error) {
        console.error('Error removing item from cart:', error);
      }
    };
  
    return (
      <div className="flex flex-row">
        <div className="flex flex-col">
          <span className="text-lg p-2 text-center mt-4 flex flex-col">
            Your cart ({cartItems.length} items)
          </span>
          {loading ? (
            <Loader />
          ) : (
            cartItems.map((item) => (
              <CartItem
                key={item.id}
                name={item.name}
                image={item.image}
                price={item.price}
                quantity={item.quantity}
                id={item.id}
                removeFromCart={handleRemoveFromCart}
              />
            ))
          )}
        </div>
        <CheckOut total={total} />
      </div>
    );
  };
  
  
  export default YourCart;
  

This is the full component, I want the total in CheckOut to be changed, and that component re-rendered anytime the quantity changes, or a cart item is added / removed, how can I get this done here? and what am I doing wrong