Displaying image in react when requested from the backend

Question

I'm trying to display the image I'm getting from my database:

my image is stored in gridFS and thats how I retrieve it:

router.get("/image/:filename", (req, res) => {
  gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
    if (!file || file.length === 0) {
      return res.status(404).json({
        err: "No file exists"
      });
    }

    if (file.contentType === "image/jpeg" || file.contentType === "image/png") {
      // Read output to browser
      const readstream = gfs.createReadStream(file.filename);
      console.log("file found");
      readstream.pipe(res);
    } else {
      console.log("not image");
      res.status(404).json({
        err: "Not an image"
      });
    }
  });
});

when I'm doing an axios request, I get the res.data in this format:

������JFIF�������������C�����������     �
��
����������������� $.' ",#��(7),01444�'9=82<.342���C�            ����

�2!�!22222222222222222222222222222222222222222222222222�����������"�������������������������������������    
���������������������}��������!1A��Qa�"q�2����#B���R��$3br� 
�����%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������������������������������������   
���������������������w�������!1��AQ�aq�"2���B����   #3R��br�
�$4�%�����&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz������������������������������������������������������������������������������������?��5���_1re!��Q�=*�<Գ 1�����$��   �F
4�  �4�&���J�M0�ӗ� D�O�S�T��[���Bd�ʚ���i�Gb���j�QI�ӰX�R�S���t�N�
��L�4���](���$�b0���Ҧ#�����X����3@��N����g4�M�<
�B�HE<
R95C��)�����)��U�Q�wZ�������P3N �@*@2h�
��ͼ�����  �M&̚��zQ����D��i��jvNi�<
i����O  �v�O+�;�������4�+��M'�vi��K�8�x5�i��1��)��  ⋀f���-F����C�sR����֤'�R�'�
;�W����Qq��M�Q��n�p)�TJjU�4����H){S��dѴP
���A��H�f�(�����i�֓�'���f�-Sq�S…

the question is how do I display it in my img tag?