Using forEach to iterate over and click elements in React Testing Library does not call onClick event handler, but using a for loop does

I have a React functional component named Shop. It takes in a callback as a prop and is rendered as a list. Each list item gets the callback passed to onClick.

function Shop(props) {
    const { onClickMenu } = props;

    const tabs = ['All', 'Boards', 'Boots', 'Bindings'];

    const renderedList = tabs.map((tab, i) => (
        <li key={i} onClick={onClickMenu}>
            {tab}
        </li>
    ));

    return <ul>{renderedList}</ul>;
}

I am using a mock to test whether the callback is called the right number of times when the li elements are clicked:

test('calls onClickMenu correct number of times', async () => {
        const mockHandler = jest.fn();
        const user = userEvent.setup();

        render(<Shop onClickMenu={mockHandler} />);

        const menu = ['All', 'Boards', 'Boots', 'Bindings'];
        menu.forEach((tab) => {
            user.click(screen.getByText(tab));
        });

        expect(mockHandler).toHaveBeenCalledTimes(4);
});

However, this fails the test:

expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 4
    Received number of calls: 0

If I use a for loop or manually iterate over the array, the test works

        // this works
        for (let i = 0; i < menu.length; i++) {
            await user.click(screen.getByText(menu[i]))
        }

        /// this also works
        await user.click(screen.getByText('All'));
        await user.click(screen.getByText('Boards'));
        await user.click(screen.getByText('Boots'));
        await user.click(screen.getByText('Bindings'));

I’m not sure why this implementation works over .forEach

Happy to take any thoughts or inputs on why this is occuring! Thank you