React Hooks checkbox not setting checked to true and false

I am having this issue where on state change i can see data-check="true" or "false" but it is not changing actual checked attribute of checkbox. Please see the codepen example link below which is closer to the code I am currently working: https://codepen.io/umair862/pen/OJNOgWB

return (
        <div>
            {typetags && typetags.map((type, idx) => {
                return (
                    <div key={type.id}>
                        <input type="checkbox" name={type.title} data-check={!!type.checked}  checked={!!type.checked}  id={type.id} onChange={e=>onTypeChange(e, type.id, idx, type.title)} />
                <label htmlFor={type.id}>{type.title}</label>
                    </div>
                );
            })}
        </div>
    );