I have the below component file for a calendar button:

import { html } from '../../../web_modules/htm/react.js';

export default ({ buttons }) => {
    return buttons.map(val => {
        let outDateclassName = false;
        let isSelected = '';
        if (val.flag !== 'currentMonth') {
            outDateclassName = 'outside-month';
        }
        if (val.isSelected) {
            isSelected = 'day-selected';
        }
        return html`
            <button
                className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
                type='button'
                aria-label='${val.value}'
                aria-selected='false'
                disabled='${val.dateDisabled}'
                tabIndex='-1'
                >
                <span className='button__children'>${val.value}</span>
            </button>
        `;
    });
};

When I add dispatch to the page as shown below:

import { html } from '../../../web_modules/htm/react.js';
import { DispatchContext } from '../../../../context/index.js';
import { useContext } from '../../../../../web_modules/react.js';

export default ({ buttons }) => {
    const dispatch = useContext(DispatchContext);
    return buttons.map(val => {
        let outDateclassName = false;
        let isSelected = '';
        if (val.flag !== 'currentMonth') {
            outDateclassName = 'outside-month';
        }
        if (val.isSelected) {
            isSelected = 'day-selected';
        }
        // isSelected = val.value;
        return html`
            <button
                className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
                type='button'
                aria-label='${val.value}'
                aria-selected='false'
                disabled='${val.dateDisabled}'
                tabIndex='-1'
                onClick=${() => { dispatch({ type: 'TIMEINTERVAL', dateRange: [1, 10, 14] }); }}
                >
                <span className='button__children'>${val.value}</span>
            </button>
        `;
    });
};

I get the below error with the above code:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

How to use Dispatch in this case?