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

Nobody has claimed this yet.

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
```js
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-label`s `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.
```js
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!

Start at the mapboxGL layer's getMapboxMap() entry point and trace how its Mapbox GL instance is added to the Leaflet map. Reproduce the issue after the load event using setLayoutProperty and setStyle, then compare the Mapbox GL state with what is rendered. Done means these interactions are reflected in the map or the integration's limitation is clearly documented.

Written by the indexing model from the issue text.