Rerender the mapbox on react state update

Library : react
I need to toggle on/off the instructions by an external button.

`const [toggleInstructions, setToggleInstructions] = useState(true);`

` setToggleInstructions((prev) => !prev)}
>
Hide/Show
`

` const directions = new MapboxDirections({
accessToken: process.env.REACT_APP_MAPBOX_TOKEN,
unit: 'metric',
profile: 'mapbox/driving',
interactive: false,
controls: {
inputs: false,
profileSwitcher: false,
instructions: toggleInstructions,
},
});`

`map.on('load', () => {
map.addControl(new mapboxgl.NavigationControl());
map.addControl(directions, 'top-left');
directions.setOrigin(start.address);
wayPointsStatic.forEach((point, index) => {
directions.addWaypoint(index, [point.lat, point.long]);
// new mapboxgl.Marker().setLngLat([point.lat, point.long]).addTo(map);
});
directions.setDestination(end.address);
});`

Start with the MapboxDirections control setup and the map.on('load') callback shown in the issue, then reproduce the React state update that toggles controls.instructions. Done means the external Hide/Show button changes the directions instructions visibility after the map has loaded.

Written by the indexing model from the issue text.