Testing new element shown when user scrolls (onWheel) RTL

Question

Was trying to perform a unit test where if a user scrolls on a specific container, new information is shown as seen in the code below.

 test("'Confirm Design Templates' info shown after user scrolls", () => {
    render(
      <BrowserRouter>
        <UpgradeJourneyOverview />
      </BrowserRouter>
    );

    const scrollWrapper = screen.getByTestId("overviewWrapper");

    fireEvent.wheel(scrollWrapper, {
      deltaY: 30,
    });

    const designTemplatesHeading = screen.getByRole("heading", {
      name: /Confirm Design Templates/i,
    });

    expect(designTemplatesHeading).toBeTruthy();
  });

This does not seem to work as the new header 'designTemplatesHeading' is not being read.Wheel event has to be used instead of scroll as my page cannot have a vertical scroll bar. Any suggestions will be much appreciated.