I'm trying to do unit testing for the first time. I want to test my index.tsx page with multiple components inside. My index.tsx page structure is like this

index.tsx

return (
  <div>
    <DefaultLayout
      meta={
        <Meta
          title=""
          description=""
          canonical="https://www.com"
        />
      }
    >
      {!props.acceptCookie && <CookieConsent />}
      <Header promo={props.promo} />
      <HomeBody
        totalPostsToday={props.totalPostsToday}
        promo={props.promo}
        postData={props}
        partners={props.partners}
      />
      <Footer />
    </DefaultLayout>
  </div>
)

If I run my test code I got an error says

Uncaught [Error: Objects are not valid as a React child (found: object with keys {store, .... If you meant to render a collection of children, use an array instead.

index.spec.tsx

import { act, render } from '@testing-library/react'
import { RouterContext } from 'next/dist/shared/lib/router-context'

import Index from '@/pages'
import { createMockRouter } from '@/test-utils/createMockRouter'
import { renderWithProviders } from '@/test-utils/reduxMockProvider'

describe('Index page', () => {
  test('should proper render components', async () => {
    await act(() => {
      render(
        <RouterContext.Provider value={createMockRouter({})}>
          {renderWithProviders(<Index />)}
        </RouterContext.Provider>
      )
    })
  })
})

Aside of my error, does my approach fine or is it better if I do isolation test per components?