Me gustaría actualizar el contenido de un componente desplegable cuando hago clic en el botón de alternar en Fluent UI. Establecí el estado verificado para el componente de alternancia, pero no sé cómo pasar este estado al componente desplegable para completarlo con nuevos elementos.

SI TOOGLE ESTÁ APAGADO--> DESPLEGABLE UTILIZA const Peces

SI EL CAMBIO ESTÁ ENCENDIDO --> USOS DESPLEGABLES const MammalsList Este es mi código:

Alternar componente

 const TogglePets = () => { const [isTrue, setIsTrue] = useState(false); return ( <div className="toggleSection"> <Checkbox className="Checkbox" label="Marine mammals" toggle checked={isTrue} onChange={e => { console.log("Marine Mammals is selected"); setIsTrue(e.target.checked); }} /> </div> ); }; export default TogglePets;

Menú desplegable de componentes

 import React from "react"; import { Dropdown } from "@fluentui/react-northstar"; const = Fishes[ { key: "1", header: 'Surgeon Fish', }, { key: "2", header: 'Nemo', } ] const = MammalsList[ { key: "01", header: 'Marine Vaquita', }, { key: "02", header: 'Shark', } ] const AnimalsSelector = () => { const [dropdownValue, setDropdownValue] = React.useState("Animals list"); console.log(dropdownValue); return ( <div className="componentDD"> <Dropdown items={Fishes} value={dropdownValue} onChange={(_, data) => setDropdownValue(data.value.header)} /> </div> ); };