Passing picture data into a component React, I am losing half of the picture data

The picture I am using is from an MYSQL database, so I get the data and convert it using:

let binary = '';
let bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b) => binary += String.fromCharCode(b));
return window.btoa(binary);

from there I add 'data:image/jpeg;base64,' to the front of the return value; I get this when converting:

data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAosAAAO9CAYAAADqvi0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhejP1nc91Ytq6J1q+8ETf6Q0ff6NN9ztm7qtKnvJcoeu+9EUUrb0nRe+9FJ0qkJMq7NMqU6MZ93jGBJSqrdp/+MAJYC8AEFhYw5zOH/Vt34UHrKTpiXflIzlHrzD5m3dnHrTf3pPVmn7CeLNYzj1h3+gHrSf/RejK+R77lux9sIOMgcsj6Mo649GYeY/+T1pd71gbyk6wv/7z15iW5dOectc6s09aRecqX3TmnrDef9vOOsv2oDRS...

This works when I put it into an Image tag, but when I pass this into a react component like this:

<FriendSnippet pic={friendState.friends[0].pic}/> // The value above is stored at friendState.friends[0].pic

Then the value of pic in the component becomes:

data:image/jpeg;base64,

It looks like it gets cut off when it is sent.

This is the code for the constructor of the component:

class FriendSnippet extends React.Component {

constructor(props) {
    super(props);
    console.log(props.pic);
}

Can I use this type of picture format when passing it into a component or am I doing it wrong?