Convert local img to base64 with react hooks

Question

I am in React hooks trying to utilise code in this question Stackoverflow question- but, as I think someone is pointing out, there are problems implementing this in a local environment.

I have a variable containing my src path:

import avatar from '../../Assets/Photos/avatar.png'

Then I try to set the photo as a useState state:

 const [ photo, setPhoto ] = useState(avatar)

Then I use useEffect to wait until the variable has loaded:

useEffect(() => {
    if (photo) {
        console.log("PHOTO EXISTS!!!!!!!!!!!!!!", photo)
        console.log(convertImgToBase64())

    }
}, [photo])

And the convertImgToBase64 function is almost identical to the one in the question I referenced:

    function convertImgToBase64()
{
    var canvas = document.createElement('CANVAS');
    let img = document.createElement('avatar');
    img.src = photo;
    img.onload = function()
    {
        canvas.height = img.height;
        canvas.width = img.width;
        var dataURL = canvas.toDataURL('image/png');

        canvas = null;
        return dataURL
    };
}

This returns undefined - why is this please?