Рендер совокупности стейтов

Первый раз делаю мини-проект на реакте - сайт с пиццей, столкнулся с такой проблемой:

У меня есть несколько видов сортировок, на каждую сортировку свой стейт. Чтобы отрендерить на странице карточки с пиццами я пробегаюсь по массиву data, где есть все карточки. И вот вопрос: во что можно объединить все стейты сортировок, чтобы они работали корректно? В коде, который сейчас отсылаю пытался сделать один стейт для всех сортировок, но они работают по отдельности, поэтому решение неверно. Надеюсь поможете с вопросом P.S. Я знаю, что можно делать фильтрацию массива с базы данных, но хотелось бы решить проблему на которую напоролся уже

App.js:

const dataClone = {
    [
      title: 'Pepperhino',
      image: ...,
      popularity: 25,
    ]
    ...
}
const [isRender, setIsRender] = useState(dataClone)
const [value, setValue] = useState('')

const filterByTitle = dataClone.filter(item => {
  return item.title.toLowerCase().includes(value.toLowerCase())
})

function cardsRender(func) {
  return func.map(({...item}, index) =>
      <Card
          key = {index}
          {...item}
      />
  )
}

<div className="App">
    <div className="wrapper">
            <Header
                setValue= {id => setValue(id)}
                filterByTitle = {filterByTitle}
                dataClone={dataClone}
            />
            <Sorting
                setIsRender={obj => setIsRender(obj)}
                dataClone={dataClone}
            />
    <div className="menu">
      {cardsRender(filterByTitle && isRender)}
    </div>
</div>

Поиск по названию в Header.jsx:

const Header = ({setValue}) => {

return (
    <div>
        <form className="header">
            <div className="search">
                <img src="/images/search.png" />
                <input type={"text"} placeholder="Поиск..." onChange={(e) => setValue(e.target.value)}/>
            </div>
        </form>
    </div>
);
};

И поиск по популярности/алфавиту в Sorting.jsx:

const Sorting = ({dataClone, setIsRender}) => {

function sortByField(field = '') {
    return field === 'popularity' ? setIsRender(dataClone.sort((a, b) => a[field] < b[field] ? 1 : -1)) :
        setIsRender(dataClone.sort((a, b) => a[field] < b[field] ? -1 : 1))
}

return (
    <div className="sorting">
        <ol id="right">
            <p>Сортировать по:</p>
            <li><button onClick={() => sortByField('popularity')}>Популярности</button></li>
            <li><button onClick={() => sortByField('price')}>Цене (по возрастанию)</button></li>
            <li><button onClick={() => sortByField('title')}>Алфавиту</button></li>
        </ol>
    </div>
);
};