Memoizing and filtering array - reactjs

Question

So I have 6 dropdown components in FilterSideBar component, all with different values in select, for example, one dropdown contains values of all car makes, other contains each model value. My main goal is to have all cars fetched on a first render and then filter the array according to selected value from dropdown, rerender cars component and display only cars of that make. I used the useMemo aprroach and it works but it isnt good solution if you have more dropdowns and its all round bad practise to useMemo with arrays. Here is my code. I s there alternative to this approach without using useRef or useMemo hooks?
import "./CarOffers.css"; import axios from "axios"; import Cars from "./Cars"; import CarSlider from "./CarSlider"; import Search from "./Search"; import FilterSideBar from "./FilterSideBar" import CarAlignment from "./CarAlignment"; import DisplayCars from "./DisplayCars"; import React, { useState, useMemo, useEffect } from "react"; import SortingCars from "./SortingCars"; import Pagination from "./Pagination";
const CarOffers = () => {
const [carsList, setCarsList] = useState([]);
const [loading, setLoading] = useState(false);
const [selectedMake, setSelectedMake] = useState();
useEffect(() => {
const fetchCars = async () => {
setLoading(true);
const res = await axios.get(url);
setCarsList(res.data);
setLoading(false);
}
fetchCars()}, []);
const getFilteredList = () => {
if(!selectedMake) {
return carsList
}
return carsList.filter((car) => car.make === selectedMake) }
var filteredList = useMemo(getFilteredList, [ selectedMake, carsList ]);
const handleMakeChange = (select) => {
setSelectedMake(select.value) }
return (
<div className="mka__wrapper-car-offers">
<div className="mka__container">
<div className="mka__content-car-offers">
<div className="mka__content-grid-offers">
<div className="item1">
< CarSlider/>
<div className="mka-responsive-item">
<div className="mka-sorting-div__offers">
<DisplayCars/>
<SortingCars/>
</div>
<CarAlignment/>
</div>
</div>
<div className="item2">
<div className="mka__side-bar-divider">
<h6>FAHRZEUGSUCHE</h6>
<div className="mka__sidebar-divider"></div>
<Search
carsList={carsList}/>
</div>
<div className="mka__sidebar-detailed-search">
<h6>DETAILSUCHE</h6>
<div className="mka__sidebar-divider"></div>
<FilterSideBar
carsList={carsList}
handleMakeChange={handleMakeChange} />
<button className="btn shorter left-alignment">
<svg width="180px" height="60px" viewBox="0 0 180 60" className="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" className="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" className="hl-line" />
</svg>
<span id="btn-txt">Zurucksetzen</span>
</button>
</div>
</div>
<div className="item3">
<Cars filteredList={filteredList} loading={loading}/>
</div>
</div>
</div>
</div>
</div> ) }
export default CarOffers;