I would like to update the content of a dropdown component when I click on the toggle button in Fluent UI. I have set the checked status for the toggle component but I don't know how to pass this status to the dropdown component to populate it with new items.

IF TOOGLE IS OFF--> DROPDOWN USES const Fishes

IF TOGGLE IS ON --> DROPDOWN USES const MammalsList This is my code:

Component toggle

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;

Component Dropdown

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>
  );
};