Is there an example of a custom avatar component? I'm trying to use the oauth2 user image.

I'm using the oauth2 plugin to authenticate a Google account for my users. I would like to take their existing profile picture and use it as their avatar by default.

From what I've read here and grok'd from the source, I will need to create a custom avatar component. Is there an example of such a component?

Also, should I take the URL image, download it, and re-upload it into a media collection for purpose of the user avatar?

Thank you 🙏

took inspiration from the gravatar implementation and arrived at this:

import React from 'react';
import { useAuth } from 'payload/components/utilities';

const GoogleAvatar: React.FC = () => {
    const { user } = useAuth();
    return (
    <img
    className="google-avatar"
    style={{ borderRadius: '50%' }}
    src={String(user.picture)}
    alt="yas"
    width={25}
    height={25}
    />
);
};

export default GoogleAvatar;