How to create a global search component with Inertia and React

I wanted a quick search on my navbar area which is globally accessible from all pages.

I tried putting my search method on the shared data like below and tried to do a partial reload whenever there is a search query from any page but it didn't work.

Is this not possible to do with inertia or is there any other way to implement this kind of feature?

   public function share(Request $request): array
   {
        return array_merge(parent::share($request), [
            'quickSearch' => fn () => $this->quickSearch($request)
        ]);
    }

Inertia.visit(curruntUrl, { search: 'John' }, { only: ['quickSearch'] })