Problems with loading the coordinates of the borders of regions

Question

I'm trying to write a simple program that, when clicked, added a marker to the map and displayed the regions of Russia. But I have a problem, it constantly outputs such an error.

"an error of the type was intercepted: it is not possible to read the undefined properties (reading 'load')" I refer to the line

".borders.load('RU'

I've already tried everything.

For example , I called like this:

ymaps.current.load('RU', {

language: 'ru', // language for region names

}).then(function (geojson) {

var regions = promise.resolve(ymaps.geoQuery(geojson));

regions.Add a map(mapRef);

}) .catch(function (error) {

console.error(error);

});

But it gave the following error.

Error: ymaps.modules: module `RU` is not defined.

Here is the full component code

const YMap = () => {
    const ymaps = React.useRef(null);
    const placemarkRef = React.useRef(null);
    const mapRef = React.useRef(null);
    const [address, SetAddress] = React.useState("");

    const createPlacemark = (coords) => {
        return new ymaps.current.Placemark(
           coords,{
                iconCaption: "loading.."
            },
            {
                preset: "islands#violetDotIconWithCaption",
                draggable: true
            }
        );

    };

   
    const getAddress = (coords) => {
        placemarkRef.current.properties.set("iconCaption", "loading..");
        ymaps.current.geocode(coords).then((res) => {
            const firstGeoObject = res.geoObjects.get(0);
            console.log(res)
            const newAddress = [
                firstGeoObject.getLocalities().length
                    ? firstGeoObject.getLocalities()
                    : firstGeoObject.getAdministrativeAreas(),
                firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
            ]
                .filter(Boolean)
                .join(", ");
            SetAddress(newAddress);
            placemarkRef.current.properties.set({
                iconCaption: newAddress,
                balloonContent: firstGeoObject.getAddressLine()
            });

ymaps.borders.load('RU', {
    lang: 'ru', // язык для названий регионов
}).then(function (geojson) {
    const regionName = 'Москва'; // название региона
    const region = ymaps.geoQuery(geojson)
        .search('properties.name == $name', { name: regionName })
        .get(0);
    const regionBounds = region.geometry.getBounds();
    console.log(`Границы региона "${regionName}": ${regionBounds}`);
});

        })
    const onMapClick = (e) => {
        const coords = e.get("coords");
        if (placemarkRef.current) {
            placemarkRef.current.geometry.setCoordinates(coords);
        } else {
            placemarkRef.current = createPlacemark(coords);            
            mapRef.current.geoObjects.add(placemarkRef.current);
            placemarkRef.current.events.add("dragend", function () {
                getAddress(placemarkRef.current.geometry.getCoordinates());
            });
        }
        getAddress(coords);
    };

    return (    
        <YMaps query={{ 
                        // load: "package.full" , 
                        apikey: "" }}>
            <Map defaultState={{
                    center: [55.751574, 37.573856],
                    zoom: 9
                }} 
                modules={["control.ZoomControl", "control.FullscreenControl","Placemark", "geocode", "geoObject.addon.balloon"]}
                style={{
                    flex: 2,
                    height: "calc(100vh - 57px)"
                }}
                onClick={onMapClick}    
                instanceRef={mapRef}
                onLoad={(ympasInstance) => (ymaps.current = ympasInstance)}
                state={mapState}
            >
            </Map>
        </YMaps>
    )
}
export default YMap;