content doesn't change after sorting react

I've a small React app. I want to make it possible to sort by different parameters, when you select a sortType, the content below is sorted by those criteria.

I created a function that should return data already with the necessary parameters depending on the sortType, but it doesn't work. The content doesn't change.
I think that there is some kind of mistake here and I can’t notice it, I'll be glad if someone helps me with this

function MarkersPage() {
  const markers = useSelector((state) => state.data.markers);
  const [data, setData] = useState([...markers]);
  const [sortType, setSortType] = useState(1);

  const markerItem = (item) => {
    return (
      <div className="markers-item" key={item.id}>
        <div className="top-info">
          <div className="icon">
            <img
              src={
                item.isHome
                  ? "../assets/home-marker.png"
                  : "../assets/default-marker.png"
              }
              alt=""
            />
          </div>
          <div className="coords">
            <span>{item.coordinates[0].toFixed(5)}, </span>
            <span>{item.coordinates[1].toFixed(5)}</span>
          </div>
          <div className="btn-block">
            <button type="button" onClick={() => handleEdit(item)}>
              edit
            </button>
            <button
              type="button"
              onClick={() => dispatch(deleteMarker(item.id))}
            >
              delete
            </button>
          </div>
        </div>
        <div className="main-info">
          <div className="info">
            <h6>{item.title}</h6>
          </div>
          {item.note ? (
            <details className="note">
              <summary>Note:</summary> <p>{item.note}</p>
            </details>
          ) : (
            ""
          )}
        </div>
        <div className="bottom-info">
          <p className="postcode">{item.postcode}</p>
          <p className="country">{item.country}</p>
        </div>
      </div>
    );
  };

  const dataChanges = () => {
    if (sortType === 1) {
      console.log(1);
      return data.map((item) => {
        return markerItem(item);
      });
    }  
    if (sortType === 2) {
      console.log(2);
      return data.map((item) => {
        return markerItem(item);
      });
    } 
    if (sortType === 3) {
      console.log(3);
    return data
        .sort((a, b) => a.date - b.date)
        .map((item) => {
          return markerItem(item);
        });
    }
    if (sortType === 4) {
      console.log(4);
      return data
        .sort((a, b) => b.date - a.date)
        .map((item) => {
          return markerItem(item);
        });
    }
  };


  return (
    <div className="markerspage">
      <div className="container">
        <div
          className="markerspage-inner"
          style={editMode ? { filter: "blur(10px)" } : {}}
        >
          <div className="sort-bar">
            <select
              defaultValue={1}
              onChange={(event) => setSortType(event.target.value)}
            >
              <option value="1">All</option>
              <option value="2">Home</option>
              <option value="3">Date ↑</option>
              <option value="4">Date ↓</option>
            </select>
          </div>
          <div>
            {!markers ? (
              <div>No places</div>
            ) : (
              <div className="markers-items">{dataChanges()}</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default MarkersPage;

You have to call setData(data…) instead of return data… inside your dataChanges

however I can recommend using createSelector from redux toolkit so then you can do something like that:

const sortedData = useSelector((state) => sortedDataSelector(state, sortType) 

const sortedDataSelector = createSelector(
  (state, sortType) => state.data.markers,
  (state, sortType) => sortType,   
  (markers, sortType) => { 
  if (sortType === 1)
    return markers.sort(…)
  } 
  …
)

Selectors are a bit tricky you can start from here https://redux.js.org/usage/deriving-data-selectors#createselector-overview