То же состояние реакции и хук реакции для двух компонентов

У меня проблема с сортировкой и фильтрацией данных, так как я использую тот же метод setData для productsort и filterBy, но отсортированные данные обновляются в dom, когда я сначала запускаю изменение в компоненте filterBy, а затем отображаются только отсортированные данные

export default ({
  data = [],
  filterBy,
  productSort,
}: Iproduct) => {
  const [_data, setData] = useState<any>(data)

  useEffect(() => {
    setData(
      data.sort((a: Obj, b: Obj) => {
        if (a.name < b.name) {
          return -1
        }
      })
    )
  }, [data])

  return (
    <>
      <div className="sortMenu">
        {productSort &&
          ComponentsBuilder({
            ...productSort,
            onChange: (name: string, value: string) => {
              setData(
                data.sort((a: Obj, b: Obj) => {
                  if (a.name > b.name) {
                    return -1
                  }
                })
              )
            },
          })}
        {filterBy &&
          ComponentsBuilder({
            ...filterBy,
            onChange: (event: ChangeEvent<any>) => {
              const { value } = event.target
              setData(
                data.filter(({ name }: any) =>
                  name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
                )
              )
            },
          })}
      </div>
      <List
        className="products-cards-list"
        data={_data}
        grid={grid}
      />
    </>
  )
}