why the changing state of my component do not transmit when i export this component?

I have a hook that rules my requests. It has state "loading" that becoming true while loading

export const useHttp = () => {

const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const request = useCallback(async (url, method = 'GET', body = null, headers = {'Content-Type': 'application/json' }) => {

    setLoading(true);

    try {
        const res = await fetch(url, {method, body, headers});
        if (!res.ok) {
            throw new Error(`Could not fetch ${url}, status: ${res.status}`); 
        }
        const data = await res.json();
        setLoading(false);
        return data;
    } catch(e) {
        setLoading(false);
        setError(e.message);
        throw e;
    }

}, [])

const clearError = useCallback(() => {
    setError(null);
}, [])

return {
    loading,
    error,
    request,
    clearError
}

}

Also i have a service that makes requests:

import { useHttp } from "../hooks/http.hook";

    const useNasaService = () => {

    const { loading, error, request, clearError } = useHttp();
 
    const _apiBase = 'https://api.nasa.gov/';
    const _apiKey = 'api_key=DEMO_KEY';

    const getMissionManifest = async (rover) => {
        const res = await request(`${_apiBase}mars-photos/api/v1/manifests/${rover}/?${_apiKey}`);
        return _transformManifestData(res.photo_manifest);
    }

    const getImagesData = async (rover, sol, page = 1) => {
        const res = await request(`${_apiBase}mars-photos/api/v1/rovers/${rover}/photos?sol=${sol}&page=${page}&${_apiKey}`);
        return res.photos.map(_transformImagesData);
    }

    const _transformImagesData = (data) => {
        return {
            id: data.id,
            sol: data.sol,
            earthDate: data.earth_date,
            path: data.img_src,
            camera: data.camera.full_name,
            rover: data.rover.name
        }
    }

    const _transformManifestData = (data) => {
        return {
            landingDate: data.landing_date,
            launchDate: data.launch_date,
            maxDate: data.max_date,
            maxSol: data.max_sol,
            name: data.name,
            photos: data.photos,
            status: data.status,
            totalPhotos: data.total_photos
        }
    }

    return {
        loading,
        error,
        clearError,
        getImagesData,
        getMissionManifest
    }

   }

   export default useNasaService;

Finally i have a component that needs state "loading" for disabling the inputs. The question is why "loading" is never getting true in this component:

import useNasaService from '../../services/useNasaService';

const RoverFilter = (props) => {

    const { loading } = useNasaService();

    console.log(loading); /* always false */

    const onRadioChange = (e) => {
        props.onRoverSelected(e.target.value);
        props.onRoverClicked(e.target.value);
    }

    return (
        <div className="roverFilter" >
            <h2 className="roverFilter__title">Select rover</h2>
            <div className="roverFilter__inputs">
                <label htmlFor="curiosity">Curiosity</label>
                <input disabled={loading} type="radio" name="rover-choise" id="curiosity" value="curiosity" onChange={onRadioChange}/>
                <label htmlFor="opportunity">Opportunity</label>
                <input disabled={loading} type="radio" name="rover-choise" id="opportunity" value="opportunity" onChange={onRadioChange}/>
                <label htmlFor="spirit">Spirit</label>
                <input disabled={loading} type="radio" name="rover-choise" id="spirit" value="spirit" onChange={onRadioChange}/>
                <label htmlFor="perseverance">Perseverance</label>
                <input disabled={loading} type="radio" name="rover-choise" id="perseverance" value="perseverance" onChange={onRadioChange}/>
            </div>
        </div>
    )
}

export default RoverFilter;

By the way, in my app there are another components, where "loading" becoming true without any problems. I cant see the difference.

for example, here loading works good:

import { useEffect, useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

import useNasaService from '../../services/useNasaService';
import ImageGallerySkeleton from '../imageGallerySkeleton/ImageGallerySkeleton';
import Spinner from '../spinner/Spinner';
import ErrorMessage from '../errorMessage/ErrorMessage';
import SliderModal from '../sliderModal/SliderModal';

const ImageGallery = (props) => {

    const {loading, getImagesData, clearError, error} = useNasaService();

    const [imagesData, setImagesData] = useState([]);
    const [nextPage, setNextPage] = useState(1);
    const [firstLoading, setFirstLoading] = useState(true);
    const [imagesDataLoaded, setImagesDataLoaded] = useState(false);
    const [itemIndex, setItemIndex] = useState(0);
    const [sliderOpen, setSliderOpen] = useState(false);

    const transitionDuration = 1000;

    const onImagesDataLoaded = (newData) => {
        setImagesData(data => [...data, ...newData]);
        setNextPage(page => page + 1);
        setFirstLoading(false);
        setImagesDataLoaded(true);
    }

    const onRequestImages = (rover, sol, page) => {
        clearError();
        if (!rover || !sol) return;
        getImagesData(rover, sol, page)
            .then(onImagesDataLoaded);
    }

    const onSliderClosed = () => {
        setSliderOpen(false);
    }

    useEffect(() => {
        onRequestImages(props.selectedRover, props.selectedSol, nextPage);
        // eslint-disable-next-line
    }, [props.selectedRover, props.selectedSol])

    if (sliderOpen) {
        document.body.style.overflow = "hidden";
    } else {
        document.body.style.overflow = "visible";
    }


    function renderItemList(arr) {
        const itemList = arr.map((item, i) => {
            return (
                <CSSTransition
                    key={item.id} 
                    in={imagesDataLoaded}
                    timeout={transitionDuration}
                    classNames='imageGallery__card'>
                    <li className="imageGallery__card"
                        onClick={() => {
                            setSliderOpen(true);
                            setItemIndex(i);
                        }}>
                        <img src={item.path} alt="img from mars"/>
                        <div className="imageGallery__descr">
                            <ul>
                                <li>Rover: {item.rover}</li>
                                <li>Earth_date: {item.earthDate}</li>
                                <li>Sol: {item.sol}</li>
                                <li>{item.camera}</li>
                            </ul>
                        </div>
                    </li>    
                </CSSTransition> 
            )
        })
        return (
            <ul className="imageGallery__list">
                <TransitionGroup component={null}>
                    {itemList}
                </TransitionGroup>
            </ul>
        )
    }

    const spinner = loading && firstLoading ? <Spinner/> : null;
    const skeleton = imagesData.length === 0 && firstLoading && !loading && !error ? <ImageGallerySkeleton/> : null;
    const items = renderItemList(imagesData);
    const errorMessage = error ? <ErrorMessage/> : null;
    const counter = imagesData.length === 0 || error ? null : 
    <h2 className="imageGallery__title">
        Showed {loading ? "..." : imagesData.length} photos of {props.totalPhotosInSol}
    </h2>
    const button = props.totalPhotosInSol === imagesData.length ? null : 
    <button 
        onClick={() => onRequestImages(props.selectedRover, props.selectedSol, nextPage)} 
        disabled={loading}
        className="imageGallery__btn">{loading  ? "Loading..." : "Load next page" }
    </button>    

    const slider = <SliderModal 
                    open={sliderOpen} 
                    items={imagesData} 
                    slideIndex={itemIndex} 
                    onSliderClosed={onSliderClosed} />

    const wrapStyles = firstLoading && loading ? {"padding": "50px"} : null;

    return (
        <section className="imageGallery" style={wrapStyles}>
            {counter}
            {spinner}
            {skeleton}
            {imagesData.length === 0 && !firstLoading ? 
                <h2 className="imageGallery__title">There is no photo for this sol</h2> : 
                items
            }
            {button}
            {errorMessage}
            {slider}
        </section>
    )
}

export default ImageGallery;