const nodeRef = useCallback(node => {
    if (node !== null) {
      M.Dropdown.init(node);
    }
  }, []);

<div
  ...
  ref={nodeRef}
  data-target="dropdown1"
>

{visible && <Component />}

DOMException: "Node was not found"

const useFabInit = ref => {
  // Load the Material CSS dynamically
  // SSR issue as "window" is not available on server side.
  useEffect(() => {
    // WebpackError: ReferenceError: window is not defined
    if (!window) return
    if (!ref || !ref.current) return

    import("materialize-css").then(({ default: M }) =>
      M.FloatingActionButton.init(ref.current, { hoverEnabled: false })
    )
  }, [])
}

const Fabby = () => {
  const [isOpen, setIsOpen] = useState(false)
  const fabRef = useRef(undefined)
  const { names: blockNames, meta } = useBlockContext()

  2️⃣ 👇 Initialize the floating action button
  useFabInit(fabRef)

  // 3️⃣ Use the ref here safely Handle open/close toggling
  useEffect(() => {
    const toggleOpen = () => setIsOpen(open => !open)
    fabRef.current.addEventListener("click", toggleOpen)
    return () => fabRef.current.removeEventListener("click", toggleOpen)
  }, [])

  const buttons = blockNames.map(({ name, id }) => {...})

  return (
              1️⃣ 👇 ref uses a callback
    <div ref={fabRef} className="fixed-action-btn">
      <a className={cn("btn-floating btn-large", isOpen ? "blue" : "red")}>
        <i className="large material-icons">mode_edit</i>
      </a>
      <ul>{buttons}</ul>
    </div>
  )
}