Call useQuery api when button is clicked

Using the refetch function useQuery, put the refetch function in the button, and when the button is clicked, the data is fetched again through the api-call. I wanted to, but it didn’t happen.

   
  
 function SeedMaterialDetails(id: number) {
  return axios.get(`/detail/${id}`, {
    headers: {
      "Content-Type": "application/json",
    },
  }) 
} 



  const { data: SeedDetail, refetch: SeedDetaiList } = useQuery(
    ["seedId", seedId],
    () => SeedMaterialDetails(seedId),
    {
      onSuccess: (data) => {
         console.log(data);
      },
      onError: () => {},

      onSettled: (data, context) => {
         
      }
    }
  );

  const [value, setValue] = useState("");
 
  const onChangeValue = (event:  event: React.ChangeEvent<HTMLInputElement>) => {
      setValue(event.target.value)
}

 const handleMaterialSave = useCallback(
    (event: React.ChangeEvent<FormEvent>) => {
      event.preventDefault();
      console.log([value]);
      SeedDetaiList();
    },

    [SeedDetaiList]
  );

return (
<>
 <input 
 type="text"
 value={value}
 onChange={onChangeValue}

 <button onClick={handleMaterialSave}>저장</button>
</>
)

I put the refetch function in handleMaterialSave and when the button works, I thought the useQuery api would call but it doesn’t respond.

I want to call the useQuery api again when I click the Button, but how do I do it?