i want to make a html snippet in javascript but when i do it from an async function i get the error Uncaught (in promise) TypeError: matTemp is undefined, what's wrong with this?. I need to know, can someone help me It´s my code:

const materiasHtml = document.querySelector('.materias');
const fragmento = document.createDocumentFragment();
let matTemp = document.querySelector('.materia').content;

const materias = [
    {
        nombre: "fisica",
        nota: 7
    },
    {
        nombre: "Calculo 3",
        nota: 3
    },
    {
        nombre: "socio-humanistica",
        nota: 6
    },
    {
        nombre: "Bases de datos 4",
        nota: 8
    },
    {
        nombre: "programacion 4",
        nota: 1
    },
    {
        nombre: "Matematicas discretas",
        nota: 3
    },
];

const obtenermateria = (id) => {
    return new Promise((resolve, reject) => {
        materia = materias[id];
        if (materia == undefined) reject('La materia no existe');
        else setTimeout(() => { resolve(materia) }, Math.random() * 400);;
    })
}

const seeRes = async () => {

    let materia = [];
    for (let i = 0; i < materias.length; i++) {
        materia[i] = await obtenermateria(i);
        matTemp.querySelector('.nombre').textContent = materia[i].nombre,
            matTemp.querySelector('.nota').textContent = materia[i].nota;

        let clone = document.importNode(matTemp, true);
        fragmento.appendChild(clone);
    }
    materiasHtml.appendChild(fragmento)
}

seeRes();