I created a custom-store.js file to fetch data from an API using a custom store. This store is used across multiple components.

However, in the frontend console, I keep seeing this warning multiple times:

data.min.js?ver=7c62e39…:2 Store "custom-store/counter" is already registered.
data.min.js?ver=7c62e39…:2 Store "custom-store/counter" is already registered.
...

How can I ensure that custom-store.js is only imported or registered once?

In the components where I fetch the data, I use the following code:

import counterStore from '../../store/custom-store.js';

const recipes = useSelect((select) => select(counterStore).getRecipe());

What is the best way to avoid multiple store registrations across components?

In my custom-store.js

import { createReduxStore, register } from '@wordpress/data';
...

const STORE_NAME = 'custom-store/counter';

...
...

const store = createReduxStore(STORE_NAME, {
    reducer,
    actions,
    selectors,
});

// This has not work:
const checkStore = select(STORE_NAME);
if (checkStore && typeof checkStore.getIcons !== 'function') {
    register(store);
}

register(store);

export default store;