Trying to change map language but interactions with mapboxMap to not update leafletMap

[jhotadhari]

Hi, I'm using mapbox-gl-leaflet ^0.0.16 within react-leaflet ^4.2.1. (mapbox-gl 3.6.0, leaflet ^1.9.4)

I try to update the mapbox-style language on style load, according to the site language.

That's the code

import { useMap } from 'react-leaflet';
import * as L from "leaflet";
import 'mapbox-gl-leaflet';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const MapboxGlLayer = ( {
    baselayer_mapbox_style_url,
    baselayer_mapbox_access_token,
} ) => {

    const { i18n } = useTranslation();

    const map = useMap();

    const [layer,setLayer] = useState( null );

    const removeLayer = () => {
        if ( layer ) {
            map.removeControl( layer );
        }
    };

    // Add mapboxGL on component mount.
	useEffect( () => {
        if ( ! layer ) {
            let layer_ = L.mapboxGL( {
                accessToken: baselayer_mapbox_access_token,
                // style: 'baselayer_mapbox_style_url',
                style: 'mapbox://styles/mapbox/light-v11',
                projection: 'mercator',
            } ).addTo( map );
            setLayer( layer_ );
        }
		return removeLayer;
	}, [] );

    // When layer changes, add on load function to change language.
	useEffect( () => {
        if ( layer ) {
            const mapboxMap = layer.getMapboxMap();
            if ( mapboxMap ) {
                const changeMapLang = () => {
                    const style = mapboxMap.getStyle();
                    style.layers.forEach( styleLayer => {
                        if (
                            styleLayer.type === 'symbol'
                            && styleLayer.layout
                            && styleLayer.layout['text-field']
                        ) {
                            mapboxMap.setLayoutProperty(
                                styleLayer.id,
                                'text-field',
                                [
                                    'get',
                                    `name:${i18n.language}`
                                ]
                            );
                        }
                    } );
                };
                mapboxMap.on( 'load', changeMapLang );
            }
        }
		return removeLayer;
    }, [layer] );

	return null;
};

export default MapboxGlLayer;

I followed this example on how to change the map language: https://docs.mapbox.com/mapbox-gl-js/example/language-switch/

I tried name:${i18n.language}, name_${i18n.language} and name${i18n.language}.

I tried to remove the function from the load event and added it to window scope. To trigger it with browser dev console. But it doesn't work neither.

I added some lines to log the country-labels text-field property a second after it got changed. And the output is alright. The function changed the text-field property, but changes do not get reflected on the map.

setTimeout( () => {
    console.log( 'debug country-label text-field', mapboxMap.getLayoutProperty( 'country-label', 'text-field' ) );
}, 1000 );

I tried other interaction with the mapboxMap object. Like changing layoutProperties for text-transform or text-size. Or changing the style entirely, eg: mapboxMap.setStyle( 'mapbox://styles/mapbox/dark-v10' ).
But the map doesn't change.

How can I interact with the mapboxMap object? Do I have to trigger some kind of refresh/update/repaint in leaflet?

Thank you!