Как сделать чтобы компонент следил за изменениями в состоянии в массиве?

Question

[arctic07]

У меня есть разные компоненты. В одном происходит сортировка массива в стейте. А второй не реагирует на эти изменения. Я понимаю что ему нужно как то следить за этим, но не могу понять как это написать.
1ый Компонент (делает сортировку)

const onChangeSelectHandler = (e) => {
    let select = e.target.value;
    if (select === "az") {
      const newUsers = users.sort();
      dispatch(setSortUsers(newUsers));
    }
    if (select === "za") {
      const newUsers = users.sort().reverse();
      dispatch(setSortUsers(newUsers));
    }
  };

<select onChange={onChangeSelectHandler}>

через редакс это всё отправляется в стейт:

export const setSortUsers = (users) => ({
  type: SET_SORT_USERS,
  payload: users,
});

const initialState = {
  users: [],
};

case SET_SORT_USERS:
  return {
  ...state,
  users: action.payload,
};

и 2ой компонент который должен изменять список после этой сортировки:
(там ещё у меня поиск есть, но он работает) (по name)

const Content = () => {
const name = useSelector(({ users }) => users.searchName);
 const users = useSelector(({ users }) => users.users);

  return (
      <ul>
        {name 
          ? <div>{name}</div>
          : users.map((user) => <li key={user}>{user}</li>)
        }
      </ul>
  );
};

А в юзерс грузится массив имён(строк) при загрузке компонента App.js:

useEffect(() => {
    dispatch(fetchUsers());
  }, []);

Answer 1

[Alexandroppolus]

users.sort() и users.sort().reverse() не создают новый массив, а меняют текущий.

const newUsers = users.slice().sort();

const newUsers = users.slice().sort().reverse();