React with Easy Peasy TypeError: enrolment[1] is undefined

Question

I m wondering why my code is not working :

• When I start the app it doesn't work
• If i change anything on the fly, it's working !

It seems to be something like when I start the server all data is not yet loaded in easy peasy so the const is undefined, so crash due to TypeError.

import { useEffect } from 'react';
//import { useParams } from 'react-router';
import { useStoreActions, useStoreState } from 'easy-peasy';
import Banner from './banner';

const Enrolment = () => {

//const { idInstitution } = useParams();

/* CODE SPECIAL POUR EASY PEASY */
const enrolment = useStoreState(state => state.enrolmentModel.steps);
const getEnrolmentForm = useStoreActions(actions => actions.enrolmentModel.getDataFromAPI);

/* CODE REACT */

useEffect(() => {
    getEnrolmentForm();
  // eslint-disable-next-line
  },[]);

return (
    <>
        <Banner />
        {enrolment[1].steps[1][0].heading1.label}
    </>
   )
};

export default Enrolment;

Any help will be really welcome :

import { action, thunk } from "easy-peasy";
import axios from 'axios';
import { API_URL } from "../../config";

const enrolmentModel = {

/* STATES */
steps: [],
step: {
    label: "",
    elements : [],
},

/* THUNKS pour effectuer des side effects comme les API*/
getDataFromAPI: thunk(async (actions) => {
    try {
        //appel à l'API de enrolment-back
        const { data } = await axios.get(`${API_URL}/steps/?idInstitution=123455`);
        actions.setDataFromAPI(data);
    } catch(e) {
        actions.setError(e);
    }
}),

/* ACTIONS a effectuer sur le model */
setError: action((state, error) => {
    state.error = error.message;
    console.log(error.message);
}),
setDataFromAPI: action((state, steps) => {
    state.steps = steps;
})
}

export default enrolmentModel;

And the parent of Enrolment :

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Enrolment from './components/enrolment';

const App = () => {
  return (
    <div className="App">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
      <BrowserRouter>  
        <Switch> 
          <Route path='/enrolment/:idInstitution' exact component={Enrolment} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;