Updating Dynamic changes to fetching Data

I am stuck at the moment. I created the funcitonanilty to control how often data is is fetched using calculation of milliseconds to seconds,munutes and hours, which seems to be working fine.

The issue I am stuck with solving is while the data is being fetched and if the user wants to change the interval from 5 seconds to 10 minutes or 1 hour. the fetching of the data goes to 1 seconds for some reason. can someone assist?

Please see my setupDynamicIntervalChange() Function:

const setupDynamicIntervalChange = (input,select) =>{

    input.addEventListener('input', () =>{
        const intervalValue = input.value;
        const selectedInterval = select.value;

        if(isValidInterval(intervalValue, selectedInterval)){
            document.querySelector('.interval-Btn');
            return
        }

    });

    select.addEventListener('change', () =>{
        const intervalValue = input.value;
        const selectedInterval = select.value;

        if(isValidInterval(intervalValue, selectedInterval)){
            document.querySelector('.interval-Btn');
        }
    });

    fetchData()
}

Please see the full code on JS fiddle

https://jsfiddle.net/blaze92/gvcnp7j8/4/

Just a note this dynamic is the last piece of the puzzle to finish off this functionality

I did try this at one point, but it does not solve the isse and causes another issue with the user input and select option

function refreshFetch(intervalMilliseconds) {
    if (refreshInterval) {
        clearInterval(refreshInterval);
        console.log('Previous refresh interval cleared');
    }

    refreshInterval = setInterval(() => {
        fetchData();
        console.log('Data fetched in refreshFetch');
    }, intervalMilliseconds);
}

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('.interval-input');
    const select = document.querySelector('.select-interval');
    const button = document.querySelector('.interval-Btn');

    setupDynamicIntervalChange(input, select);

    button.addEventListener('click', () => {
        const intervalValue = parseInt(input.value, 10);
        const selectedInterval = select.value;

        if (isValidInterval(intervalValue, selectedInterval)) {
            const intervalMilliseconds = intervalValue * (intervalLookup[selectedInterval] || 1000);
            fetchInterval = setInterval(fetchData, intervalMilliseconds);
            refreshFetch(intervalMilliseconds);
        }
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('.interval-input');
    const select = document.querySelector('.select-interval');
    const button = document.querySelector('.interval-Btn');

    setupDynamicIntervalChange(input, select);

    button.addEventListener('click', () => {
        const intervalValue = parseInt(input.value, 10);
        const selectedInterval = select.value;

        if (isValidInterval(intervalValue, selectedInterval)) {
            const intervalMilliseconds = intervalValue * (intervalLookup[selectedInterval] || 1000);
            fetchInterval = setInterval(fetchData, intervalMilliseconds);
            refreshFetch(intervalMilliseconds);
        }
    });
});