Problem with InertiaJS + React basic Datatable live search

[andcl]

Hello everyone,

Having this FilmController controller method (accessed using GET, /films):

...
public function index() {  
    $user = auth()->user;

    return Inertia::render('Films', [
        'films' => fn () => FilmResource::collection($user->films())
        'tableData' => fn () => FilmResource::collection($user->films()
            ->when(Request::input('search'), function ($query, $search) {
                return $query->where('name', 'like', '%'.$search.'%')
                    ->orWhere('description', 'like', '%'.$search.'%');
            })->paginate(10)->withQueryString()),
    ]);
}
...

And a Datatable React component like the following:

...
export default function Datatable({...}) {
...
    /* Search functionality */
    const [search, setSearch] = useState("");
    let searchTimeout = null;
    useEffect(() => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            router.get(
                route(route().current()), { search: search },
                {
                    preserveState: true,
                    preserveScroll: true,
                    replace: true,
                    only: ["tableData"],
                },
            );
        }, 300);
    }, [search]);
...
return (
...
    <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
        <SearchField
            id="search"
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onReset={() => setSearch("")}
            placeholder={"Search film..."}
        />
    </div>
...
); 
}

The problem is every single time I write something in the SearchField input, it triggers a GET request that fully refreshes the page. It does not preserve the state, scroll or anything. In addition, and logically as a GET request, it changes the URL concatenating ?search=[the_search_query]. If the URL did not change, it would work as expected. But somehow, the URL change triggers a full page refresh, which is not the intended behaviour here.
How could I write a workaround for this?

Thanks in advance.