How to show image in reactjs?

Question

I want to show image, with response JFIF like this ����JFIF��.

My code is like this

<div className="box-body">
    { props.uploading 
          ? (
             <div>
                 <img src={props.image} alt="upload placeholder"/>
                 <Spinner />
             </div>
            )
                            
          : props.generated !== ''
             ? <img src={props.generated} alt="generated motif"/>
             : <AddPhotoAlternate className="icon-large"/>
     }
</div>

GenerateM.propTypes = {
    image: PropTypes.string.isRequired,
    generated: PropTypes.string,
    list: PropTypes.array,
    uploading: PropTypes.bool.isRequired,
    imageChange: PropTypes.func.isRequired,
};

here my sagas code

export function* generateMotif({ payload }) {
    try {
        let { detail } = yield select(state => state.user);
        const result = yield call(API.generateMotif, payload, detail.api_token);
        
        const image = URL.createObjectURL(result);
        yield put({
            type: types.GENERATE_MOTIF_SUCCESS,
            payload: image,
        });

    } catch (err) {
        yield put(handleError(err));

        yield put({
            type: types.GENERATE_MOTIF_FAILURE,
            payload: err,
        });
    }
}

here my reducer code

case types.GENERATE_MOTIF_SUCCESS:
            return {
                ...state,
                generating: false,
                generated: action.payload,
                motif: update(state.motif, { $unshift: [action.payload.data] })
            };

and here my code for calling API

generateMotif(data, token) {
        var path = `motif`;

        var formData = new FormData();

        formData.append("matrix", data.matrix);
        formData.append("color", data.color);
        formData.append("img_file", data.file);

        return axios.post(`${API_MOBILE}/${path}`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
        }, {responseType: 'blob'})
        .catch((error) => {
            if (error.response) {
                return Promise.reject({
                    message: error.response.data.error,
                    code: error.response.status
                });
            } else if (error.request) {
              console.log(error.request);
              throw error;
            } else {
              console.log('Error', error.message);
              throw error;
            }
        });
    },

here is response from called API

����JFIF��C    $.' ",#(7),01444'9=82<.342��C  2!!22222222222222222222222222222222222222222222222222���"�� ���}!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������� ���w!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?���\RPEPE�PJ��EBj�G-���xI#��/�=������d��O*���j�ox|iZpfQ�H3ӥpb� �ge(uf�����81S���K�r�M`���I�7J���Gj�,��M�K"��Zǽ�Xbi]�����%My����#5�M�w��\݊�PWfN�����~U#3����:1����vH�H�u�\��d�k����H�_�E�l��5M�&�rMG^�V8[�R�8�*df���@X��y^:�(��i�i������LBRR�A,J(��!h��� (��Q@Q@.i(�&��(��(��(��(��(��(��%QEQEQE�4R�=i)...

I'm already trying this https://stackoverflow.com/a/60474472/11722883 but still not working for me.