I’m building a sample ReactJS + Vite app implementing OAuth2/OIDC flows and DPoP using the oidc-client-ts library and from the documentation I see that to instantiate a UserManager object I’d have to do something along the lines of

import { UserManager } from 'oidc-client-ts';

const settings = {
    authority: 'https://demo.identityserver.io',
    client_id: 'interactive.public',
    redirect_uri: 'http://localhost:8080',
    response_type: 'code',
    scope: 'openid profile email api',
    post_logout_redirect_uri: 'http://localhost:8080',
    userStore: new WebStorageStateStore({ store: window.localStorage }),
    dpop: {
        bind_authorization_code: true,
        store: new IndexedDbDPoPStore()
    }
};

const userManager = new UserManager(settings);

Problem is that every time a component needs to use the UserManager object a new IndexedDbDPoPStore is generated. This, plus the fact that i need to programmatically generate a Private/Public key pair to bind an access token to the public key, a new key pair is also generated along side the new store.
This leads to problems when someone refreshes the page on a component that needs to use the UserManager and a REST API call is made because the DPoPproof will be generated using the newly created private key and not the original one.
Is there a way to prevent UserManager from being created multiple times?
I was thinking about a global variable but I don’t know if it is the correct solution.
Thanks