Search functionality on react and nextjs using router

See more:

ReactJS

next.js

I'm working with a search functionality and getting the correct data from page1, which is 2 sets of Array of data, but the problem is when I pushed it my page2 using router, it showed only 1 data. Do I miss something with my code? Thank you in advance.

What I have tried:

PageOne.js

import React, {useState} from "react"
import Router, { useRouter } from "next/router"

function PropertyList() {
const [searchInput, setSearchInput] = useState("");
const [property, setProperty] = useState([]);
const router = useRouter();

const fetchPropertiesInfo = async () => {
const api_token = process.env.NEXT_PUBLIC_API_TOKEN

const response = await fetch(`dummy/api/filter?term=${searchInput}`, {
  method: 'GET',
    headers: {
    'Authorization': 'Bearer ' + api_token,
    'Content-Type': 'application/json',
    'Accept': "application/vnd.v1+json"
  }
})
const data = await response.json()
setProperty(data.properties)
}
{
  property.map((property) => {
    router.push({
      pathname: "/PageTwo",
      query: {
        id: property.id,
        name: property.name,
      }
    }, undefined, { shallow: false }, '/PageTwo')
    // {console.log(property.id)}
    // {console.log(property.name)}  
  })
}
return (
<>
<div className="pt-24">
  <div className="flex justify-center items-center">
    <input onChange={(e) => setSearchInput(e.target.value)} type="text" className="p-2 border border-primaryOrange" />
    <button onClick={fetchPropertiesInfo} className='bg-primaryOrange text-white rounded-sm p-2'>Search</button>
  </div>
  <h1>List of Properties</h1>
</div>
</>
)
}

export default PropertyList

PageTwo.js

import Router, { useRouter } from 'next/router';

function displayResults() {
const router = useRouter();
const { id, name } = router.query;

return (
<>
  {
    <div key={id} className='py-40 flex justify-center items-center'>
    <p>{id}</p>
    <h1>{name}</h1>

  {
    console.log(id)
  }
  {   
    console.log(name)
  }
  </div>
  }
</>
)
}

export default displayResults