writing a test for an <img /> tag that has onClick()

Question

I am attempting to write a test for an img tag where the src of the image changes onClick, however the userEvent.click is not changing the src - even though this function works when tested manually.

 it("should render with empty star and turn to fullstar when clicked ", async () => {
    renderContexts(<MyComponent programId={programIds} />);
    const favIconShowing = await screen.findByTestId("myid");

    expect(favIconShowing).toBeInTheDocument();

    const initialSrc = favIconShowing.getAttribute("src");

    console.log(initialSrc, " initial");

    await userEvent.click(favIconShowing).then(() => {
      console.log("triggered");
    });

    await waitFor(() => {
      const updatedSrc = favIconShowing.getAttribute("src");

      console.log(updatedSrc, " updated");

      expect(updatedSrc).not.toBe(initialSrc);
    });
  });

and the img in question

<img
                    data-testid={`myid`}
                    onClick={() => {
                      favStar(courseName);
                    }}
                    src={favorites.includes(courseName) ? fullStar : emptyStar}
                    alt="Favorite Star"
                    className={styles.favStar}
                  />

What i have done to attempt to solve this problem is using fireEvent.click to see if the click was possibly not being triggered and console logging the src of the image when manual testing to ensure the src does in fact change.