Unable to find text in document/screen React testing

Question

I'm new to react testing, learning by coding, here i want to click 'cameras' and then under it appears list of cameras, like camera 1, camera 2...

i'm able to find 'cameras' and click it, but then when trying to make sure 'Camera 1' to be in document it wont work and gives this: 'TestingLibraryElementError: Unable to find an element with the text: Camera 1. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.'

If have any question just ask me, english is not my mother language so could be mistakes

test code:

 import { render, screen, RenderResult, cleanup, fireEvent, getByRole, getByDisplayValue, getByText, } from "@testing-library/react"; describe("Testing component", () => { test("Testing Camera", async () => { const { getByLabelText, getByTestId, getByText, getByRole } = render( <Provider store={store}> <CardComponent classes={{ formControl: "", }} /> </Provider> ); let Cameras = screen.getByRole("button", { name: /cameras/i }); fireEvent.click( Cameras, new MouseEvent("click", { bubbles: true, cancelable: true, }) ); const screenText = screen.getByText("Camera 1"); expect(screenText).toBeInTheDocument(); }); });

img: