I have client component buttons adding search parameters and my URL ends up looking something like this:
http://localhost:3000/verses?query=test&section=old
However, in verses/page.tsx, when I try to destructure the search parameters and output them on the console, it always shows undefined... can someone explain why?

import SearchBar from "@/components/verses/SearchBar";
import SideBar from "@/components/verses/SideBar";

const Database = ({ section, query } : { section : string, query: string }) => {

  console.log(section)

  return (
    <div className="mt-10 max-w-7xl px-6 mx-auto">
      <SearchBar />
      <SideBar />
    </div>
  );
};

export default Database;

Sorry if this is a stupid question, I just started react and nextjs a few weeks back