Toggling between different map styles while maintaining available layers and sources

[mcfwesh]

Hello,
First of all, great work with this library.
I have a situation where when toggling between mapstyles, I encounter an error whereby available layers in a previous map style (for example 'streets') is not available in 'satellite-street'. I have seen similar issues to this, but I cannot pinpoint a solution. Your help will be appreciated. This is my code:

import React, { useState } from "react";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { makeStyles } from "@material-ui/core/styles";

import "./MapStyle.css";

export const styles = [
  { name: "Streets", url: "ckl258cga13yx18p3bgt6xsc8" },
  { name: "Satellite", url: "ckl2648pk150f17msa8pdt5ba" },
];


const MapStyle = ({ changeMapStyle, map }) => {
  const [alignment, setAlignment] = useState("ckl258cga13yx18p3bgt6xsc8");
  const classes = useStyles();

  const handleAlignment = (event, newAlignment) => {
    setAlignment(newAlignment);
  };
  const handleClick = (style) => {
    changeMapStyle(style);
    map && console.log(map.getStyle());

  };
  return (
    <ToggleButtonGroup
      value={alignment}
      exclusive
      onChange={handleAlignment}
      className={classes.toggleGroup}
    >
      {styles.map((style, index) => (
        <ToggleButton
          data-testid={style.name}
          key={index}
          value={style.url}
          onClick={() => handleClick(style.url)}
          className={classes.toggleButton}
        >
          {style.name}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
};

export default MapStyle;

changeMapStyleProp:

  const changeMapStyle = (style) => {
    setMapStyle(style);
  };

[mcfwesh]

Bump!

[Mayur8933]

same issue, you got the solution ?