title: How do I return my original list on the 3rd click?
body: <p>Front end code</p>
  <pre><code>  const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
    //make an axios request to get information from database
    useEffect(() =&gt; {
      Axios.get(&quot;http://localhost:3001/customers&quot;).then((response) =&gt; {
        setCustomerList(response.data);
      });
    }, []);
  //sort function final
    const [counter, setCounter] = useState(0);
    const [sortedCustomerList, setSortedCustomerList] = useState([]);
  
    function sortCustomer() {
      const sortedCustomer = [...customerList];
      let sortCount = counter;
      //check the current sortCount, if it is 3 then go back to 1, if not then increase by 1
      if (sortCount === 3) {
        sortCount = 1;
        setCounter(1);
      } else {
        sortCount += 1;
        setCounter(sortCount);
      }
      console.log(sortCount);
      if (sortCount &lt; 3) {
        sortedCustomer.sort(function (x, y) {
          if (sortCount === 1) {
            return x.contacted === y.contacted
              ? 0
              : x.contacted === &quot;Yes&quot;
              ? -1
              : 1;
          } else if (sortCount === 2) {
            return x.contacted === y.contacted
              ? 0
              : x.contacted === &quot;Yes&quot;
              ? 1
              : -1;
          }
        });
  
        setCustomerList(sortedCustomer);
      } else {
        setCustomerList(customerList);
      }
    }
  &lt;th onClick={() =&gt; sortCustomer()}&gt;Contacted?&lt;/th&gt;
  </code></pre>
  <p>I have implemented a sort function onClick method. So first click returns the descending order list, 2nd click returns the ascending order list but the 3rd click does not return the original customerList. how to solve this problem.</p>