Generic fetch wrapper

Question

I am trying to write the wrapper under window.fetch.

type MyResponse<T> = {
    response: Response;
    data: T;
}

type MyResponseType = 'JSON' | 'EMPTY';

async function makeRequest<T, R extends MyResponseType>(url: string, responseType: R): Promise<MyResponse<R extends 'JSON' ? T : undefined>> {
    const response = await fetch(url);

    if (responseType === 'JSON') {
        const data = await response.json() as T;

        return { response, data } // Type 'T' is not assignable to type 'R extends "JSON" ? T : undefined'
    } else if (responseType === 'EMPTY') {
        return { response, data: undefined } // Type 'undefined' is not assignable to type 'R extends "JSON" ? T : undefined'
    } else {
        return { response, data: undefined } // Type 'undefined' is not assignable to type 'R extends "JSON" ? T : undefined'
    }
}

/*
Returns Promise<MyResponse<string>>, correct
*/
function fetchData() {
    return makeRequest<string, 'JSON'>('https://google.com', 'JSON')
}

/*
Returns Promise<MyResponse<undefined>>, correct
*/
function fetchNoData() {
    return makeRequest<void, 'EMPTY'>('https://google.com', 'EMPTY')
}

How to fix it?

Maybe I don't really need generic R or responseType param, but I would like to infer T if I pass anything that is not void | undefined, and I would like to infer undefined if I pass void | undefined.

Please don't give advice like "use axios", "use any (unknown)". It is a small piece of code from the project where I am not working single so I am not able to rewrite it, just to strongly type it.

A small refactor is up to you.