How to trigger render (with filter and pagination) on sort method in React?

This is my Sort.js style component:

 Sort By  Vehicle make Vehicle model  

This is the function in App.js where the sorting component is rendered

This is a function:

const onSelectChange = (e) => { const value = e.target.value; if (value === "VehicleMake") vehicles.sort((a, b) => a.vehicleMake.localeCompare(b.vehicleMake)); else if (value === "VehicleModel") { vehicles.sort((a, b) => a.vehicleModel.localeCompare(b.vehicleModel)); } else { vehicles.sort((a, b) => a.id - b.id); }

"Vehicles" is an array of objects that I get from the Firestore database.

Whenever I change the value of the SortOption, it does not automatically sort the array of objects, but when I click on page 2 in the pagination, and then click on page 1, it sorts it.

This is my grid component:

 {vehiclesData.map((vehicle) => (  setSelectedVehicle(vehicle)} deleteHandler={() => deleteHandler(vehicle.id)} /> ))} 

This is my filter function:

const vehiclesData = useMemo(() => { let computedVehicles = vehicles; if (searchVehicle) { computedVehicles = computedVehicles.filter((vehicle) => vehicle.vehicleMake.toLowerCase().includes(searchVehicle.toLowerCase()) ); } setTotalVehicles(computedVehicles.length); return computedVehicles.slice( (currentPage - 1) * vehiclesPerPage, (currentPage - 1) * vehiclesPerPage + vehiclesPerPage );

As I wrote before, I want my vehicles to render automatically by make or model, not when I click on the page number in the pagination.