How to trigger query when url param changes

export const useNotes = () => {
    const queryParams = new URLSearchParams();
    
    const fetchNotes = async () => {
        const from = queryParams.get("from");

        if (from) {
            queryParams.append("from", from);
        } else {
            queryParams.delete("from");
        }

        const result = await axios.get(`/api/notes${encodeURIComponent(queryParams.toString())}`);
        return result.data;
    };
  
    const { data, error, isLoading, refetch } = useQuery<Array<INote>, Error>({ queryKey: ['notes', queryParams], queryFn: fetchNotes });

    return { notes: data, error, isLoading, refetch };
};

export const useNotes = () => {
    const queryParams = new URLSearchParams();
    
    const fetchNotes = async () => {
        const from = queryParams.get("from");

        if (from) {
            queryParams.append("from", from);
        } else {
            queryParams.delete("from");
        }

        const result = await axios.get(`/api/notes${encodeURIComponent(queryParams.toString())}`);
        return result.data;
    };
  
    const { data, error, isLoading, refetch } = useQuery<Array<INote>, Error>({ queryKey: ['notes', queryParams], queryFn: fetchNotes });

    return { notes: data, error, isLoading, refetch };
};