I store User-uploaded files in mongoDB GridFS, when I want to show the same to the users, I fetch the file from GridFS to my express server and send the buffer data of the requested file to the client(React), the client then converts buffer data to a blob and generates a URL to display the file. All good, but when I open the URL, the file is empty (PDF in this case), although the page numbers are displayed correctly, no content of the PDF is shown. What could've possibly gone wrong so that nothing is shown in the PDF? The data sent by the server is consumed as JSON by the client.

Below is the code for converting array buffer to blob and generating a URL for the same, where props.data.data is the buffer data.

let url = props.data? URL.createObjectURL(new Blob([new Uint8Array(props.data.data).buffer],{
        type:'application/pdf'
    })):''

console logging the buffer data in client, I get something like this:

[37, 80, 68, 70, 45, 49, 46, 52, 10, 37, 239, 191, 189, 239, 191, 189, 239, 191, 189, 239, 191, 189, 10, 49, 32, 48, 32, 111, 98, 106, 10, 60, 60, 47, 67, 114, 101, 97, 116, 111, 114, 32, 40, 77, 111, 122, 105, 108, 108, 97, 47, 53, 46, 48, 32, 92, 40, 87, 105, 110, 100, 111, 119, 115, 32, 78, 84, 32, 49, 48, 46, 48, 59, 32, 87, 105, 110, 54, 52, 59, 32, 120, 54, 52, 92, 41, 32, 65, 112, 112, 108, 101, 87, 101, 98, 75, 105, 116, 47, 53, …]

console logging the same on the server, I get this:

<Buffer 25 50 44 46 2d 31 2e 34 0a 25 ef bf bd ef bf bd ef bf bd ef bf bd 0a 31 20 30 20 6f 62 6a 0a 3c 3c 2f 43 72 65 61 74 6f 72 20 28 4d 6f 7a 69 6c 6c 61 ... 207562 more bytes>

Been trying to fix this for days, but was unable to get my head around it. Any help is appreciated.
Thanks.