Show how filters for a Looker embedded dashboard can be retrieved and used outside the immediate react component

LookerEmbedDashboard.js

import React, { useEffect, useRef } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";

const LookerEmbedDashboard = ({callback}) => {
  const [dashboardEmbedded, setDashboardEmbedded] = React.useState(false);
  const dashboardRef = useRef(false);
  useEffect(() => {
    if (dashboardRef.current) return;
    dashboardRef.current = true;
    makeDashboard();
  }, []);

  let makeDashboard = async () => {
    // LookerEmbedSDK.init(...) is already run at the page level
    LookerEmbedSDK.createDashboardWithId(1)
      .appendTo(document.getElementById("dashboard"))
      .withClassName("container-fluid")
      .withClassName("p-0")
      .withClassName("h-100")
      .on("dashboard:run:start", (e) => {
        console.debug("Dashboard started");
        callback(e.dashboard.dashboard_filters);
      })
      .on("dashboard:filters:changed", (e) => {
        console.debug("Filters changed", e.dashboard.dashboard_filters);
      })
      .on("dashboard:run:complete", (e) => {
        console.debug("Dashboard complete");
      })
      .build()
      .connect()
      .then((dashboard) => {
        setDashboardEmbedded(true);
        console.debug("LookerEmbedSDK.createDashboardWithId()::Connected!");
      })
      .catch((error) => {
        console.error("An unexpected error occurred", error);
      });
  };

  return (
    <>
      <div id="dashboard" className="h-100"></div>
    </>
  );
};

export default LookerEmbedDashboard;