quiero hacer un fragmento de html en javascript, pero cuando lo hago desde una función asíncrona, aparece el error Uncaught (en promesa) TypeError: matTemp no está definido, ¿qué tiene de malo? Necesito saber, alguien me puede ayudar Es mi código:

 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();