Error: Error in useStoreState: Cannot read properties of undefined (reading 'getState') - easy-peasy

Question

Using easy-peasy on my next js code, i am trying to store some values. But when i try tu use some stored values, i get the title error. What should I do?

My estructure is:

My code is:

_app.js

import { StoreProvider } from 'easy-peasy';
import '../styles/globals.css';
import { store } from '../stores/Store';

function MyApp({ Component, pageProps }) {
    return (
        <StoreProvider store={store}>
            <Component {...pageProps} />
        </StoreProvider>
    );
}

export default MyApp;

Store.js

import { createStore } from 'easy-peasy';

const store = createStore({
    activeStep: 1,
    step1Answers: { name: '', resp: '' },
});

index.js

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useStoreState } from 'easy-peasy';

export default function Home() {
    const activeStep = useStoreState((state) => state.activeStep);

    console.log(activeStep);

    return (
        <div className={styles.container}>
            <h1>My active step: {activeStep}</h1>
        </div>
    );
}

Answer 1

Found it... I needed to add my store in my _app.js file

import { StoreProvider, createStore } from 'easy-peasy';
import '../styles/globals.css';

const store = createStore({
    activeStep: 1,
    step1Answers: { name: '', resp: '' },
});

function MyApp({ Component, pageProps }) {
    return (
        <StoreProvider store={store}>
            <Component {...pageProps} />
        </StoreProvider>
    );
}

export default MyApp;