我正在构建一个条件，根据列的顺序显示向上箭头或向下箭头，但是无论状态如何，这两个箭头都不会出现。

import { useEffect, useState } from 'react';
import './App.css';
import { IoCaretDown } from "react-icons/io5";
import { IoCaretUp } from "react-icons/io5";

function Countries() {

  const [nameOrder, setNameOrder] = useState('asc');
  const [contOrder, setContOrder] = useState('asc');
  const [popOrder, setPopOrder] = useState('asc');
  console.log('name', nameOrder);
  
  const sortByName = () => {
    const sorted = [...data].sort((a, b) => {
      if (nameOrder === 'asc') {
        if (b.name.common > a.name.common) {
          return -1;
        }
        if (b.name.common > a.name.common) {
          return 1;
        }
        return 0;
      } else {
        if (b.name.common < a.name.common) {
          return -1;
        }
        if (b.name.common < a.name.common) {
          return 1;
        }
        return 0;
      }
    });
    setData(sorted);
    console.log('nameOrder', nameOrder)
    let newOrder = nameOrder === 'asc' ? 'desc' : 'asc';
    setNameOrder(newOrder);
    console.log('nameOrder', nameOrder)
  };

  const sortByContinent = () => {
    const sorted = [...data].sort((a, b) => {
      if (contOrder === 'asc') {
        if (b.continents > a.continents) {
          return -1;
        }
        if (b.continents > a.continents) {
          return 1;
        }
        return 0;
      } else {
        if (b.continents < a.continents) {
          return -1;
        }
        if (b.continents < a.continents) {
          return 1;
        }
        return 0;
      }

    });
    setData(sorted);
    console.log('current order', contOrder)
    let newOrder = contOrder === 'asc' ? 'desc' : 'asc';
    setContOrder(newOrder);
    console.log('current order', contOrder)
  };

  const sortByPopulation = () => {
    const sorted = [...data].sort((a, b) => {
      if (popOrder === 'asc') {
        return a.population - b.population;
      } else {
        return b.population - a.population;
      }
    });
    setData(sorted);
    console.log('popOrder', popOrder)

    let newOrder = popOrder === 'asc' ? 'desc' : 'asc';
    setPopOrder(newOrder);
    console.log('popOrder', popOrder)
  };

  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all?fields=name,continents,population,flag')
      .then((resp) => resp.json())
      .then((apiData) => {
        setData(apiData);
      }, []);
    console.log('data', data)

  }, []);
  return (
    <div className="app-container">
      <h1 style={{ textAlign: "center" }}>Country Table Data</h1>

      <table>
        <thead>
          <tr>
            <th onClick={sortByName}>
              Name
              {nameOrder === 'desc' ?? <IoCaretDown />}
              {nameOrder === 'asc' ?? <IoCaretUp />}
            </th>
            <th onClick={sortByContinent}>
              Continent
              <IoCaretDown />
              <IoCaretUp />

            </th>
            <th onClick={sortByPopulation}>
              Population
              <IoCaretDown />
              <IoCaretUp />
            </th>
            <th>Flag</th>
          </tr>
        </thead>
        <tbody>
          {data.map((country) => (
            <tr key={country.flag}>
              <td>{country.name.common}</td>
              <td>{country.continents}</td>
              <td>{country.population}</td>
              <td>{country.flag}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Countries;

在表格标题中，我添加了条件：名称{名称订单=== '描述'？？} {名称订单=== '上升'？？}
请注意，即使控制台日志明确显示状态为“asc”，“Name”列也没有箭头