React - Accessing PhotoURL from Firebase user: Image not displaying - reactjs

Question

Using Material UI components such as Tooltip, IconButton, and Avatar, I've made this:
<Tooltip title="Open settings">
<IconButton
onClick={handleOpenUserMenu}
sx={{ p: 0 }}
>
<img
alt="pfp"
src={auth.currentUser.photoURL}
/>
<Avatar
alt="Google Photo/Initial"
src={auth.currentUser
.photoURL}
/>
</IconButton>
</Tooltip>
As you can see, this photoURL isn't producing an image, despite in the source code actually being accessed from firebase properly, as can be seen below in the <img> tag (when I right click -> open in new tab, the image is definitely the right one and corresponds to the Google account I used to sign into my web application through Firebase):
To reiterate, the problem isn't accessing the photoURL of the Firebase user, but rather displaying it using either the native <img> or Material UI <Avatar> tag.

Answer 1

Suddenly this works when the only line technically changed was within the <IconButton> (imported from "#mui/material/IconButton") as such:
from sx={{ p: 0 }} to sx={{ px: "15px" }}
This is the final edited code (with the <img> tag removed since it was simply used for testing):
<Tooltip title="Open settings">
<IconButton
onClick={handleOpenUserMenu}
sx={{ px: "15px" }} // only changed line
>
<Avatar
alt="Google Photo/Initial"
src={
auth.currentUser
.photoURL
}
/>
</IconButton>
</Tooltip>
I can only assume that this is what fixed my problem and turned the output into the following: