Comparto el siguiente ejemplo
_________
Puedes adaptarlo a tu proyecto ( agregar useQuery), en general se debe usar una funcion de **retro-propagación (sale del componente y regresa causando un re-render)**, aqui la función tiene el nombre de `setPageNumber`.

Notese como se declara y sale desde el `provider` para poder ser consumida por `useContext` en tu `Child` component `TaskFotos`, desde ahi regresa y causa un re-render al atcualizar el estado de `page`:

    import React, { useState, useEffect, createContext, useContext } from "react";
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link,
      useNavigate
    } from "react-router-dom";
    
    const DataContext = createContext(null);
    
    function ItemList() {
      const { data, setPageNumber, page, totalPages } = useContext(DataContext);
      console.log(data);
      return (
        <div>
          <h2>Items</h2>
          <ul>
            {data.map((item) => (
              <li key={item.id}>{item.title}</li>
            ))}
          </ul>
          <div>
            <button disabled={page === 1} onClick={() => setPageNumber(page - 1)}>
              Previous
            </button>
            <button
              disabled={page === totalPages}
              onClick={() => setPageNumber(page + 1)}
            >
              Next
            </button>
          </div>
        </div>
      );
    }
    
    function App() {
      const [data, setData] = useState([]);
      const [page, setPage] = useState(1);
      const [totalPages, setTotalPages] = useState(0);
    
      useEffect(() => {
        fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}`)
          .then((response) => {
            setTotalPages(Number(response.headers.get("X-Total-Count")));
            return response.json();
          })
          .then((data) => setData(data))
          .catch((error) => console.log(error));
      }, [page]);
    
      const setPageNumber = (pageNumber) => {
        setPage(pageNumber);
      };
    
      return (
        <DataContext.Provider value={{ data, setPageNumber, page, totalPages }}>
          <div>
            <nav>
              <Link to="/">Home</Link>
              <Link to="/items">Items</Link>
            </nav>
            <Routes>
              <Route path="/" element={<h1>Home</h1>} />
              <Route path="/items" element={<ItemList />} />
            </Routes>
          </div>
        </DataContext.Provider>
      );
    }
    
    function Main() {
      return (
        <Router>
          <App />
        </Router>
      );
    }
    
    export default Main;