Try to get value from URL in NextJS

I trying to put value in url and trying to extract value in search.js with router, but I’m getting this error:

TypeError: Cannot read properties of undefined (reading ‘q’)

  <form onSubmit={handleSubmit}>
    <input
      type="text"
      placeholder="Search..."
      value={searchValue}
      onChange={(e) => setSearchValue(e.target.value)}
      class="w-full px-4 py-2 rounded-md text-gray-900"
    />
    <button type="submit">Submit</button>
  </form>
</div>

const handleSubmit = (event) => {
  event.preventDefault(); // Prevent the default form submission
  router.push(`../search?q=${encodeURIComponent(searchValue)}`);
};

Search.js:

const Search = () => {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    if (router.isReady) {
      setSearchQuery(router.query.q || '');
    }
  }, [router.isReady, router.query.q]);

  if (!router.isReady) {
    return <div>Loading...</div>; // Or some loading indicator
  }

  return (
    <div>
      <p>Search Query: {searchQuery}</p>
    </div>
  );
};

export default Search;