Two way fetching click and onChange

[yousef-repzo]

in this example i have two keys in the filters object r and q , how can i handle fetching the data when clicking the button and when only the r key changed in filter object

the refetch function is calling the old r value

import React, {useState} from 'react'
import {createRoot} from 'react-dom/client'

import {
  useQuery,
  queryCache,
  useQueryClient,
  QueryClientProvider,
  QueryClient,
} from '@tanstack/react-query'
import axios from 'axios'
const getCars = async (params = {}) => {
  return await axios.get('https://myfakeapi.com/api/cars', {params})
}
const queryClient = new QueryClient()

function MyComponent() {
  const queryClient = useQueryClient()
  const [filters, setFilters] = useState({q: '', r: ''})

  const {isLoading, data, error, refetch} = useQuery(
    ['myData'],
    () => getCars(filters),
    {
      refetchOnWindowFocus: false,
    },
  )

  const handleFilterChange = async (event) => {
    const {name, value} = event.target
    setFilters((prevFilters) => ({...prevFilters, [name]: value}))
    refetch()

  }


  const handleButtonClick = () => {
    refetch()
  }
  return (
    <div>
      q
      <input
        onChange={(e) => {
          setFilters({...filters, q: e?.target?.value})
        }}
      />
      <div>
        r
        <input name="r" onChange={handleFilterChange} />
      </div>
      <button
        onClick={() => {
          handleButtonClick()
        }}
      >
        Ok
      </button>
    </div>
  )
}

createRoot(document.getElementById('root')).render(
  <div>
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  </div>,
)