Why does router.push() refresh my page when typing Arabic or Persian characters in Next.js 13?

Question

I have simple search input and button when I click button the input value catch by state and push url with query string to Next.js 13 server component and fetch some data by query string

const getBrands = async (slug: string = "") => {
  const res = await fetch(
    `http://localhost:5000/api/brands?searchString=${slug}`,
    {
      cache: "no-store",
    }
  );
  if (!res.ok) {
    throw new Error("Failed to fetch data!");
  }
  return res.json();
};

const Home = async ({ searchParams }: { searchParams: { slug: string } }) => {
  const data = await getBrands(searchParams.slug);

  console.log(searchParams.slug);

  return (
    <main className="container mx-auto">
      <ul>
        {data.map((item: any) => {
          return (
            <li key={item.id}>
              {item.id} - {item.title}
            </li>
          );
        })}
      </ul>
    </main>
  );
};

export default Home;

This is home server component

"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

const Header = () => {
  const searchParams = useSearchParams();
  const searchStr = searchParams.get("searchString");
  const [searchValue, setSearchValue] = useState<string>(
    searchStr ? searchStr : ""
  );
  const router = useRouter();

  const handleSearch = () => {
    router.push(`/?slug=${searchValue}`);
  };

  return (
    <header className="h-16 bg-gray-900">
      <div className="h-full flex items-center justify-center">
        <button
          type="button"
          className="h-10 px-2 bg-sky-700 hover:bg-sky-600 text-gray-200 rounded-tr rounded-br"
          onClick={handleSearch}
        >
          جستجو
        </button>
        <input
          type="text"
          className="h-10 bg-gray-200 rounded-tl rounded-bl outline-none px-2 focus:ring-1 ring-cyan-500"
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
        />
      </div>
    </header>
  );
};

export default Header;

and this is header client component.

My issue is when I type latin character to input its works fine. But when I type arabic or persian character router.push() refreshes my page.