Как настроить поисковый ввод, который будет обновлять данные на другой странице/компоненте с помощью Next.js?

У меня есть статические данные, которые я отображаю на странице таблицы. Всего у меня несколько страниц в приложении.

данные.json:

[
  {
    "title": "Item 1",
  },
  {
    "title": "Item 2",
  }
...
]

Страница таблицы:

import data from '@/data.json';

import Header from '@/components/header/header.js';
import Table from '@/components/table/table.js';

export default function TablePage(props) {

  return (
    <div>

      <Header data = {data} />
      <main>
        <Table data = {data}></Table>
      </main>
    </div>
  )
}

У меня есть два компонента на этой странице.

Компонент заголовка:

import { useRouter } from 'next/router'
import styles from './header.module.css';

function search(e, data, router) {
  e.preventDefault();
  const string = e.target.querySelector('input').value;
  const result = data.filter(item => item.title.match(string));
  router.push('/table_page');
}

export default function Header (props) {
  const data = props.data;
  const router = useRouter()

  return (
    <header className = {styles.header}>
      <div className = {styles.search}>
        <form onSubmit = {(e) => {search(e, data, router)}}>
          <button type='submit'></button>
          <input type='search' placeholder='Type song or artist name'/>
        </form>
      </div>
    </header>
  )
}

Компонент таблицы:

import styles from './table.module.css';

export default function table({data}) {

  const renderItems = arr => {
    const items =  arr.map((item, i) => {
      return (
        <tr>
          <td>
            {item.title}
          </td>  
        </tr>
      )
    })

    return items 
  }

  return (
    <div className = {styles.table}>
      <table>
        <thead>
          <tr>
            <th>
              Title
            </th>         
          </tr>
        </thead>
        <tbody>
          {renderCollabs(data)}
        </tbody>
      </table>
    </div>
  );
}

Я хочу, чтобы когда пользователь вводит ввод (на любой странице), он перенаправлялся на страницу таблицы, а таблица отображалась с отфильтрованными данными (на основе ввода).

В функции search мне удалось получить новые данные и перенаправить на нужную страницу. Но как перерисовать таблицу?