In rtl, avoid rendering multiple components within a single test?

In rtl, avoid rendering multiple components within a single test?

For example, suppose that the sidebar folds when a button in the header is pressed.

To test this, I rendered the header and sidebar in one test like below.

it("Fold/Unfold sidebar when click toggle button", async () => {
    // Given
    render(<Header />);
    render(<Sidebar />);

    const button = await screen.findByTestId("fold-sidebar-icon");
    const sidebar = await screen.findByTestId("sidebar");

    expect(sidebar).toHaveStyle({ width: styles.layout.sidebar.unfold });

    // When: click fold button
    fireEvent.click(button);
    // Then: fold sidebar
    expect(sidebar).toHaveStyle({ width: styles.layout.sidebar.fold });

    // When: click unfold button
    fireEvent.click(button);
    // Then: unfold sidebar
    expect(sidebar).toHaveStyle({ width: styles.layout.sidebar.unfold });
  });

Is this an action that should be avoided in the usual use of react testing libraries? If so, what is the appropriate test structure?