Rails 7 toastr using importmaps

Im trying to use toastr to display a message. Im using rails 7 but Im unsure if i have it imported and implemented correctly

import { Controller } from "@hotwired/stimulus";
import { initializeApp } from 'firebase';
import { getMessaging, getToken, onMessage } from "firebase-messaging";
// import { onBackgroundMessage } from "firebase-messaging-sw";
import * as toastr from 'toastr';

 onMessage(messaging, (payload) => {
        alert(`${ payload.notification.title }\n ${ payload.notification.body }`);
        toastr['success']("Message will come here", "Title");
    });

That last line is where nothing happens. the alert shows up as expected

pin "toastr", to: "https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"

That is my pin statement in importmap.rb

  <head>
<title>NitroCabs</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/firebase-messaging-sw.js');
  });
  }
</script>
<%= favicon_link_tag asset_path('firebase-logo.png') %>

That is my head in application.html.erb