I want to show data conditionally but i am facing this error

<div className="w-full">
        <div className="overflow-x-auto">
          <table className="w-full border-collapse bg-white shadow-md rounded-lg">
            <thead>
              <tr className="bg-gray-100">
                <th className="p-3 text-left text-black">Image</th>
                <th className="p-3 text-left text-black">Product</th>
                <th className="p-3 text-left text-black">Price</th>
                <th className="p-3 text-left text-black">Size</th>
                <th className="p-3 text-left text-black">Quantity</th>
                <th className="p-3 text-left text-black">Total</th>
                <th className="p-3 text-left text-black">Action</th>
              </tr>
            </thead>
            <tbody>
              {reduxCart.length > 0 ? (
                reduxCart.map((item) =>
                  item.quantity > 0 ? (
                    <tr key={item.productId} className="border-b">
                      <td className="p-3">
                        {item.image ? (
                          <Image
                            src={item.image}
                            alt={item.name}
                            className="w-16 h-16 object-cover rounded-md"
                            width={64}
                            height={64}
                          />
                        ) : (
                          <span>No image available</span>
                        )}
                      </td>
                      <td className="p-3 text-black">{item.name}</td>
                      <td className="p-3 text-black">₹{item.price}</td>
                      <td className="p-3 text-black">
                        <select
                          value={item.size}
                          onChange={(e) => dispatch(updateSize({ productId: item.productId, size: e.target.value }))}
                          className="border p-2 rounded-md"
                        >
                          <option value="">Select Size</option>
                          <option value="S">S</option>
                          <option value="M">M</option>
                          <option value="L">L</option>
                          <option value="XL">XL</option>
                          <option value="XXL">XXL</option>
                        </select>
                      </td>
                      <td className="p-3 text-black flex items-center">
                        <Button onClick={() => dispatch(decreaseQuantity(item.productId, item.size))} className="bg-green-500 px-2 py-1 rounded">
                          -
                        </Button>
                        <span className="mx-2">{item.quantity}</span>
                        <Button onClick={() => dispatch(increaseQuantity(item.productId, item.size))} className="bg-green-500 px-2 py-1 rounded">
                          +
                        </Button>
                      </td>
                      <td className="p-3 text-black">₹{item.price * item.quantity}</td>
                      <td className="p-3 text-left">
                        <Button onClick={() => dispatch(removeFromCart(item.productId, item.size))} className="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-md">
                          Remove
                        </Button>
                      </td>
                    </tr>
                  ) : null
                )
              ) : (
                <tr>
                  <td colSpan="7" className="text-center p-3 text-black">No items in cart</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

  const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true); // This ensures content is only rendered on the client
      }, []);
    
      // Only render this component after the component has mounted
      if (!isMounted) {
        return null;
      }