React Как связать два компонента?

Я создала компонент Grid, который выводит товары. После создала компонент Filter для сортировки и фильтрации товаров. Как он работает? Я через props передаю в него фильтры, название и функцию. То есть массив вот таких вот объектов:

{id:1, name:"by name", function: () => sortByName("name")}

Внутри фильтра вывожу все названия и задаю им событие OnClick()

Эти два компонента Grid и Filter, я вызываю в App. Теперь мне нужно их как то связать, так как функции сортировки находятся в Grid и мне нужно их передать в фильтр. Здесь я связываю компоненты с помощью ref, то есть передаю ссылку на Grid в Filter.

const App = () => {
const ref1 = useRef()
return (
<div>
  <Filter ref = {ref1}/>
  <Grid ref={ref1}  products={products} countOnRow={3} totalCount ={6}/>
</div>
  )}

компонент Grid в укороченном виде. В самом Grid эту ссылку я присваиваю div

const Grid = React.forwardRef((props, ref) => {
const sortByName = (sort) => {
    setItems(items.sort((a,b) => a[sort].localeCompare(b[sort])))
    setProdus([...items.slice(0,startPage)])
    setOkay(!okay)
}
return (
    <div className="container" ref={ref}>
        .....
    </div>
)

Как применить фильтры к Grid?