Как отсортировать массив?

function rotate(arr) {
  const last = arr.pop();
  arr.unshift(last);
}

function Sale({ ItemDiscount }) {
  let arr = ItemDiscount;
 
  const arrowRight = () => {
    let last = arr.pop();
    arr.unshift(last);
  };
 
  console.log(arr);
  return (
    <div className={styles.DiscountGroup}>
      <div className={styles.title}>
        <div className={styles.lookSale}>
          <h2>Скидки</h2>
          <a>Смотреть всё</a>
        </div>
        <div className={styles.switch}>
          <img className={styles.switchLeft} src="/img/arrowLeft.png" />
          <img
            onClick={arrowRight}
            className={styles.switchRight}
            src="/img/arrowRight.png"
          />
        </div>
      </div>
 
      <div className={styles.DiscountGroupBlock}>
        {arr.map((item, index) => {
          return (
            <div className={styles.DiscountList}>
              <img className={styles.imageDiscount} src={item.image} />
              <div className={styles.discriptionDiscount}>
                {item.discription}
              </div>
              <div className={styles.nameDicrtiption}>
                {item.nameDicrtiption}
              </div>
              <div className={styles.nameDiscount}>{item.name} </div>
              <div className={styles.infoDiscount}>
                <div className={styles.priceDiscount}>{item.price}</div>
                <div className={styles.basketDiscount}>{item.basket}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Sale({ ItemDiscount }) {
  const [arr, setArr] = React.useState(ItemDiscount);
  
  const arrowRight = () => {
    const newArr = [...arr];
    let last = newArr.pop();
    newArr.unshift(last);
    setArr(newArr);
  };
}