export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ filters: Record<string, any>[] }>
}) {
  let params = await searchParams
  let filters = params.filters

  let analysisResults = await Analysis.filterBy(filters)

  return (
    <>
      <div className="flex items-center justify-between">
        <Heading>Company analysis</Heading>
      </div>
      <AnalysisFilters className="mt-8" />
      <TableRoot aria-label="Company list" className="mt-14">
        <TableHead>
          <TableRow>
            <TableHeader>Name</TableHeader>
            <TableHeader>Company</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {analysisResults.map((analysis) => (
            <TableRow
              key={analysis.id}
              href={
                analysis.documentID
                  ? `/document/${analysis.documentID}`
                  : undefined
              }
            >
              <TableCell>{analysis.document?.name}</TableCell>
              <TableCell>{analysis.company?.name}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </TableRoot>
    </>
  )
}

I have this simple component that filters documents based on search params and then renders them. Analysis filters is just a simple form that updates the search params. I have this on change handlers that calls router.refresh when the search params change to re-render the server components. I see in network tab that it does re-render the server component and send the data back, but I don't see it updating in the ui. Can anyone help me debug this?