Générer les messageBox avec Semantic UI

Bonjour,
Je cherche à générer dynamiquement les message à l'aide des boites de dialogue en utilisant Semantic UI (semantic-ui.com). Je fais fasse à une erreur que je n'arrive pas à interpreter.

Ce que je fais

/**
 * Fonction permettant de générer les box de message
 * @param messageText
 * @param headerText
 * @param type
 * @return boolean
 */
let messageBox = function (messageText, headerText, type='Yes') {
    let box = document.createElement('div');
    box.className = 'ui tiny modal';
    box.setAttribute('id', 'messageBox');
    let head = document.createElement('div');
    head.className = 'header';
    head.innerHTML = headerText;
    box.append(head);
    let content = document.createElement('div');
    content.innerHTML = messageText;
    box.append(content);
    let action = document.createElement('div');
    action.className = 'actions';
    let yes; let no;
    switch (type) {
        case "Yes":
            yes = document.createElement('div');
            yes.className = 'ui positive button';
            yes.innerHTML = 'OK';
            action.append(yes);
            box.append(action);
            document.body.append(box);
            let msg = document.querySelector('.ui.tiny.modal');
            console.log(msg);
            msg.modal({
                closable: false,
                onApprove: function () {
                    return true;
                }
            }).modal('show');
            break;
        case 'YesNo':
            yes = document.createElement('div');
            yes.className = 'ui positive right labeled icon button';
            yes.innerHTML = 'Oui' + '<i class="checkmark icon"></i>';
            no = document.createElement('div');
            no.className = 'ui negative button';
            no.innerHTML = 'Non';
            action.append(no);
            action.append(yes);
            box.append(action);
            box.modal({
                closable: false,
                onDeny: function () {
                    return false;
                },
                onApprove: function () {
                    return true;
                }
            }).modal('show');
            break;
        default:
            yes = document.createElement('div');
            yes.className = 'ui positive button';
            yes.innerHTML = 'OK';
            action.append(yes);
            box.append(action);
            box.modal({
                closable: false,
                onApprove: function () {
                    return true;
                }
            }).modal('show');
            break;
    }
};

Ce que je veux

Ce que je dois obtenir est semblable à ce qu'il y a sur le site web de Semantic UI, concernant les fenêtres modales
https://semantic-ui.com/modules/modal.html

Ce que j'obtiens

Uncaught TypeError: msg.modal is not a function
    at messageBox (app.js:60)
    at HTMLButtonElement.<anonymous> (create:428)