Как избежать дублирования бизнес-логики (управление страницей, сортировкой) при использовании одного и того же компонента таблицы в разных местах приложения?

// useTable.js
import { useState, useMemo } from 'react';

export function useTable(data, config) {
  const [page, setPage] = useState(1);
  const [sortBy, setSortBy] = useState(null);
  const [filter, setFilter] = useState('');

  const processedData = useMemo(() => {
    let result = [...data];
    if (filter) {
      result = result.filter(item =>
        item.name.toLowerCase().includes(filter.toLowerCase())
      );
    }
    if (sortBy) {
      result.sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : -1));
    }
    const pageSize = config.pageSize || 10;
    const start = (page - 1) * pageSize;
    return result.slice(start, start + pageSize);
  }, [data, page, sortBy, filter, config]);

  return { processedData, page, setPage, sortBy, setSortBy, filter, setFilter };
}

// Table.jsx
function Table({ data, onSort, onFilter, columns }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key} onClick={() => onSort(col.key)}>
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            {columns.map(col => (
              <td key={col.key}>{row[col.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// UsersPage.jsx
function UsersPage() {
  const { processedData, page, setPage, sortBy, setSortBy, filter, setFilter } =
    useTable(usersData, { pageSize: 20 });

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <Table
        data={processedData}
        onSort={setSortBy}
        columns={[
          { key: 'name', label: 'Name' },
          { key: 'email', label: 'Email' },
        ]}
      />
      <button onClick={() => setPage(page - 1)} disabled={page === 1}>Prev</button>
      <span>Page {page}</span>
      <button onClick={() => setPage(page + 1)}>Next</button>
    </div>
  );
}