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?