How to use React-toastify in multiple web components

I have a main project, let’s say projectA which import couple of other react components for example a module federated react components projectB.
In the projectA I have installed and imported the react toastify container in the App.js.ProjectB is also imported to App.js. Let’s say the App.Js in projectA is like this

const App = () => {
 return(
    <div>
      <ToastifyContainer />
      <ProjectB />
      <OtherCompoentsFromProjectA />
    </div>
 )
}

So, in this case, the toastify container only works with the ProjectA. But,seems like the notification does’t work from the projectB. The way only it works if we also import the ToastifyContainer also in projectB. So,it means the more are the components the more imports need to be done for react toastify. Is it the best practices. Or are there any other ways that we can handle it so the toastify components needs to be added only once for example only in projectA.