Page objects initialization for Playwright

In my current Playwright test automation project, we use page object model pattern.

At the beginning I was initializing all page objects within a test (usually in before hooks)

test('something', async ({ page}) => {
    const loginPage = new LoginPage(page);
    const dashboardPage = new DashboardPage(page);
    //...
    const exportModal = new ExportModal(page);
    //then user these objects
});

Then as we grow these started looking a bit messy and I decided to somehow aggregate these objects initialization

export class MyApp {
readonly page: Page;
readonly loginPage: LoginPage;
readonly dashboardPage: DashboardPage;

   constructor (page: Page){
       this.page = page;
       this.loginPage = new LoginPage(page);
       this.dashboardPage = new DashboardPage(page);
       //...
       this.exportModal = new ExportModal(page);
   }
}

And inside tests

test('something', async ({ page}) => {
    const myApp = new MyApp(page);

    myApp.loginpage.doSomething();
    myApp.dashboardPage.doSomethingElse();
});

Am I doing it right or there is some better approach to initialize page objects?