tRPC Query Invalidation Issue with Client-Side Data Fetching and Initial Data from server component

import { api } from '@/server/trpc/server';
import { DEFAULT_PAGE_SIZE } from '@/utils/constants';
import { Stack } from '@mantine/core';
import { Customers } from './customers';
import { Stats } from './stats';

export default async function CustomerPage() {
  const customers = await api.customers.list({
    filters: { search: '' },
    pagination: { page: 1, pageSize: DEFAULT_PAGE_SIZE },
  });

  return (
    <Stack>
      <Stats />

      <Customers initialData={customers} />
    </Stack>
  );
}

'use client';

import type { customers } from '@/server/routers/customers';
import { api } from '@/server/trpc/react';
import { DEFAULT_PAGE_SIZE } from '@/utils/constants';
import { useInputState } from '@mantine/hooks';
import type { inferProcedureOutput } from '@trpc/server';
import { useState } from 'react';

export function Customers({
  initialData,
}: {
  initialData: inferProcedureOutput<typeof customers.list>;
}) {
  const [page] = useState(1);
  const [search] = useInputState('');
  const [pageSize] = useState(DEFAULT_PAGE_SIZE);

  const customers = api.customers.list.useQuery(
    {
      filters: { search },
      pagination: { pageSize, page },
    },
    { initialData },
  );

  console.log(customers.data);

  return <div />;
}