React: How to pass data from getInitialProps to Context API?

I'm currently facing a problem of updating a Context I created with the result from the data fetched from getInitialProps

I keep getting undefined for StateContext

code sandbox

My logic is :

1. Create a StateContext with a empty state.
2. Fetch the initial data in /page/_app.js, update the StateContext
3. Use a react hook to display the updated StateContext in the TopPost.js component.

Another problem: I think my fetch is good, but I'm not to sure.

Here is my StateContext:

import React, { createContext, Component } from 'react'

const StateContext = createContext();

class StateProvider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            top_posts: null,
            summary_metrics: null
        };
    }

    render() {
        const { value } = this.props
        return (
            <StateContext.Provider value= {this.state}>
                {this.props.children}
            </StateContext.Provider>
        );
    }
}

export default StateProvider;

Then I'm fetching the initial data here in my /page/_app/js :

import "../styles/main.css";
import fetch from 'isomorphic-unfetch';
import App from 'next/app';
import StateProvider from '../components/contexts/StateContext';
import { AuthProvider } from '../components/contexts/AuthContext';

export default class MyApp extends App {
    static async getInitialProps() {
        try {
            const [data1, data2] = await Promise.all([
                fetch('https://www.mocky.io/v2/5ecefb253200006800e3ce8d'),
                fetch('https://www.mocky.io/v2/5ed071f73500007300ff9c38'),
            ])

            let top_post = data1
            let summary_metrics = data2

            console.log("top_post", top_post);
            console.log("summary_metrics", summary_metrics);

            return { 
                top_post: top_post,
                summary_metrics: summary_metrics
             }
        } catch (err) {
            console.log(err);
        }      
    }

    render() {
        const { Component, pageProps } = this.props;

        return (
            <AuthProvider> 
                <StateProvider value={{ top_post: this.top_post, summary_metrics: this.summary_metrics }}>
                    <Component {...pageProps} />
                </StateProvider>
            </AuthProvider>
        );
    }
}

Use the fetched data here:

import moment from 'moment'
import React, { useState, useEffect, useContext } from "react";
import { BsArrowUpRight } from 'react-icons/bs';

import StateContext from "../contexts/StateContext";

const TopPost =()=> {
    const [posts, setPosts] = useState([]);

    const context = useContext(StateContext);
    console.log('State context:', context) // Context is undefined here

    return (
        <div>
            <div className="min-w-0 max-h-screen overflow-y-scroll">
                {posts.map(post => (
                <div key={post.id}>
                        <div className='px-10 my-4 py-4 bg-white border border-8 border-gray-400 rounded-lg border-solid'>
                            <div className='flex justify-between'>
                                <span className='font-light text-black text-lg font-semibold'>@{post.username}</span>
                                <span className='font-medium rounded ml-56'> {moment(post.postDate).format(('L'))}. {moment(post.postDate).format(('LT'))}</span>
                                <a className="font-extrabold rounded text-3xl text-blue-600" href={post.postUrl} target="_blank" rel="noopener noreferrer">
                                    <BsArrowUpRight />
                                </a>
                            </div>

                            <div className="mt-2">
                                <p className='mt-2 text-xl text-gray-600'>{post.textContent}</p>
                            </div>
                        </div>
                </div>
              ))}
              </div>
            </div>
    );
}
export default TopPost;