if ternario does not work, function has value but never used says

I am new with programing and I want to use if ternario, but it doesn't work. I have two functions and I create a third function to show one of them or the other. It is an application in ReactJS. Below is the code:

import { Table } from "react-bootstrap";
import { Link } from "react-router-dom";
import { useCartContext } from "../../Context/CartContext";
   
const emptyCart = () => {
  return(
  <>
    <div>
      <h3>The Cart is empty</h3>
      <p>
        Return to home to see our products
      </p>
      <Link to='/' ><button className="btn btn-info"> Home </button></Link>
    </div>
  </>
  );
};

const CartFunction = () => {
  const { list, totalPrice } = useCartContext();
    return (
        <Table striped hover>
          <thead>
            <tr>
              <th>Product</th>
              <th>Title</th>
              <th>Quantity</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            {list.map((varietal) => (
              <tr key={varietal.id}>
                <td>
                  <img
                    src={varietal.pictureUrl}
                    alt='img'
                    style=
                  />
                </td>
                <td>{varietal.title}</td>                    
                <td>{varietal.count}</td>
                <td>${varietal.price}</td>
              </tr>
            ))}
          </tbody>
          <thead>
            <tr>
              <td colSpan="3">Total</td>
              <td>${totalPrice()}</td>
            </tr>
          </thead>
        </Table>
    );
  };

const CartComponent = () => {
    const { list } = useCartContext();
    
    return (
      <>
      {list.length !== 0 ? <CartFunction /> : <emptyCart />}
      </>
    );
  };

export default CartComponent;

Visual Code it says that emptyCard has a value but it is never used. If there is someone that could help me I would appreciate it. Cheers