Issue sending data through pages in Next.js

from my main page, I want, when clicking a button, to go to another page and transfer data to it, but it throws an error "TypeError: Cannot read properties of undefined (reading 'users')". There are a lot of conflicting information about this on the Internet, so I thought it would be better to ask here. Here are the two components:

    return (
      <>
        <h1>Zeke´s Bill Splitter</h1>

        <h2>Enter the amount of people</h2>

        <form onSubmit={checkAmount}>
          <input 
          type="number"
          onChange={saveInput} />
          </form>

        <Link 
        href={{
          pathname: '/pages/mainPage',
          query: { users: users }
        }}>Go to main</Link>
      </>
    );
  };

  export default Page;

And this is the component that should recieve the data, but aparently it´s not recieving it:

  "use client"
  import React from 'react'
  import { useRouter } from "next/navigation"

  const MainPage = () => {

    const router = useRouter()
    const { userAmount } = router.query.users;

    return (
      <div>{userAmount}</div>
    )
  }

  export default MainPage

Does anybody have any idea? This is my first Next.js project and it's pretty confusing.

After Next 13 we have two useRouter, one is exported from 'next/router' that should be used with the old pages router and another exported from 'next/navigation' that should be used with the new app router. The router.query property only exists in the router from 'next/router', since you are using the one from 'next/navigation' (app folder implementation) router.query is returning as undefined. With the app router in order to get the query params you need to use useSearchParams. You can read more about it here https://nextjs.org/docs/app/api-reference/functions/use-search-params

"use client"
import React from 'react'
import { useSearchParams } from 'next/navigation';

const MainPage = () => {

  const searchParams = useSearchParams();
  const userAmount = searchParams.get('users');

  return (
    <div>{userAmount}</div>
  )
}

export default MainPage