I’m trying to learn Mobx with React.

I have problem to display fetched data.

I created store, context, provider and view component.

const API_URL = "https://jsonplaceholder.typicode.com/posts";

class PostsStore {
    posts: Post[] = [];
    error: unknown = undefined;
    constructor() {
        makeObservable(this, {
            posts: observable,
            error: observable,
            addPost: action,
            fetchData: action,
        });
    }

    addPost(newPost: Post) {
        this.posts = [...this.posts, newPost];
    }

    fetchData() {
        fetch(API_URL)
            .then((res) => res.json())
            .then((data) => (this.posts = data));
    }
}

export const postsStore = new PostsStore();

export const PostsProvider = ({ children }: React.PropsWithChildren) => {
    return (
        <PostsContext.Provider
            value={{
                error: postsStore.error,
                fetchData: postsStore.fetchData,
                posts: postsStore.posts,
            }}
        >
            {children}
        </PostsContext.Provider>
    );
};

export const usePostsContext = () => {
    const context = React.useContext(PostsContext);

    if (!context)
        throw new Error("usePostsContext must be wrapped between PostsProvider");

    return context;
};

const List = observer(() => {
    const context = usePostsContext();
    React.useEffect(() => {
        context.fetchData();
    }, [context]);

    return (
        <ul>
            {context.posts.map((post) => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
});

export const Mobx = () => {
    return (
        <div className="h-full">
            <List />
        </div>
    );
};

I can see on the networks tab, that data is fetched, but component didn’t re-render to display it. Why is that? Component is wrapped by observer. What i’m doing wrong?