How can I empty the “ field after submitting while keeping it as a server component?

Here I am using server component for Search form but to able to empty the input field when user click the cancel button I import a <SearchReset/> which is a client component but i cant reset or empty the form.

SearchForm.tsx

;<Form
  action="/search"
  className="search-form input input-bordered flex items-center gap-2 bg-white py-2 px-4 max-w-md mx-auto rounded border-2"
>
  <input
    name="query"
    defaultValue={query}
    className="search-input grow w-full focus:outline-none outline-none focus:ring-0 active:ring-0"
    placeholder="Seacrh Ideas"
  />

  {query ? (
    <SearchReset />
  ) : (
    <button type="submit" className="flex items-center">
      <Search className="text-secondary size-6" />
    </button>
  )}
</Form>

SearchReset.tsx

export default function SearchReset () {
  const reset = () => {
    const form = document.querySelector(".search-form") as HTMLFormElement
    console.log(form)
    if (form) {
      const input = form.querySelector(
        'input[name="query"]',
      ) as HTMLInputElement
      console.log(input) // this works
      if (input) {
        input.value = "" // this doesnt
      }
      form.reset()
    }
  }

  return (
    <button type="reset" className="flex items-center" onClick={reset}>
      <X className="text-black-200 size-4" />
    </button>
  )
}

I tried to access the form’s input field after I click the reset button which I can but when am trying to set it’s value empty or reset the form it’s not working