How to fetch slugs from server to header in Next.js - next.js

Question

I try to fetch data (slugs of categories) from my server and use it inside the header navbar that is reusable in all the site.
In _app I have the layout which contains the header component:
function MyApp({ Component, appProps, pageProps, router }) {
return (
<>
<SlugContext.Provider value={{ slugs: pageProps.response }}>
<Layout>
<Component {...pageProps} />
</Layout>
</SlugContext.Provider>
</>
);
}
MyApp.getInitialProps = async ctx => {
const response = await axios
.get(`${API}/categories/`)
.then(res => {
return res.data;
})
.catch(error => {
if (error) {
console.log(error);
}
});
const pageProps = await App.getInitialProps({ response, ...ctx });
return { pageProps: { ...pageProps, response } };
};
In the header navbar I put the context:
const context = useContext(SlugContext);
and inside I have links like:
<NavLink href={`/categories/${context.slugs[0].slug}`} onClick={closeMobileMenu}>
<NavLink href={`/categories/${context.slugs[1].slug}`} onClick={closeMobileMenu}>
THE PROBLEM: When I console log inside the header I can see my slugs. When I click on one link -> it directs me to the slug, like: http://localhost:3000/categories/slugone
Bu the following message appears:
Unhandled Runtime Error
TypeError: Cannot read property '0' of undefined
...........
href={`/categories/${context.slugs[0].slug}`}===undefined
Why is it undefined with 0, if before he have all the slugs data? It has to be in the context, why does it disappear and how can I handle it?