Update photo in AAD with React and MS graph (404 not found)

I have an application, in which I want to update my photo in AAD. Currently, my user have access to all scopes, including "User.ReadWrite.All" which as far as I understand is the scope needed to update an image in AAD with MS graph

Currently, I'm taking my image from the input and transform it to an UTF-8 string:

const reader = new FileReader();
reader.onloadend = () => {
    //Here I make a call to my API method to PUT the image
}
reader.readAsText(image, 'UTF-8')

In my API call, I'm getting the token needed for my scope which I append to the header along with my contenttype.

export const setProfileImage = async (file) => {
    const accessToken = await getToken("User.ReadWrite.All");
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;
    headers.append("Authorization", bearer);
    headers.append("Content-Type", "image/jpeg");
    const options = {
        method: "PUT",
        headers: headers,
        body: file
    };

    return fetch("https://graph.microsoft.com/v1.0/me/photo/$value", options)
}

The response is 404 not found.

I've tried multiple things, for example if I change my link to and add my user-id:

https://graph.microsoft.com/beta/users/MY_ID/photo/$value

I get a 400 bad request response.

Moreover, I tried to do the following:

const reader = new FileReader();
reader.onloadend = () => {
    //Here I make a call to my API method to PUT the image
}
reader.readAsBinaryString(image)

Nothing really changes, I still get either 404 (For /me/) and 400 (for /MY_ID/)

The image I'm trying to upload is a few kbs, so I'm sure it's not the image causing problems

from Update photo in AAD with React and MS graph (404 not found)