```js
// pages/profile.js

import React from 'react';

import ProfilePageContext from './ProfilePageContext';
import ProfilePageContainer from './ProfilePageContainer';
import UserPostsContainer from './UserPostsContainer';
import UserFriendsContainer from './UserFriendsContainer';

//👇 Ensure that your context value remains referentially equal between each render.
const context = {
  UserPostsContainer,
  UserFriendsContainer,
};

const AppProfilePage = () => {
  return (
    <ProfilePageContext.Provider value={context}>
      <ProfilePageContainer />
    </ProfilePageContext.Provider>
  );
};

export default AppProfilePage;
```