[Bug] O que estou errando?

Eu preencho o formulario e quando clico em enviar apenas atualiza a pagina, no console não está acusando NADA.

conectaAPI.js

async function listaVideos(){
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
    // console.log(conexaoConvertida);

}

async function criaVideos(titulo,descricao,url,imagem){
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualizações`,
            url: url,
            imagem : imagem
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos,
    criaVideos
}

criarVideo.js

import { conectaApi } from "./conectaAPI.js";
const formulario = document.querySelector("[data-formulario]");

async function criarVideo(){
    evento.preventDefault();
    const imagem = document.querySelector(" [data-imagem] ").value
    const url = document.querySelector("[data-url]").value
    const titulo = document.querySelector(" [data-titulo] ").value
    const descricao = Math.floor(Math.random() *10).toString();

   await conectaApi.criaVideos(titulo,descricao,url,imagem);

   window.location.href = "../pages/envio-concluido.html";
}

formulario.addEventListener("submit", evento=> criarVideo(evento))

mostraVideos.js

import { conectaApi } from "./conectaAPI.js";

const lista = document.querySelector("[data-lista]");

function constroiCard (titulo, descricao, url, imagem){
    const video  = document.createElement("li");
    video.className = "videos__item";
    video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
    title="${titulo} " frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
<div class="descricao-video">
    <img src="${imagem} " alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao} </p>
</div>` 

    return video;
}

async function listaVideos(){
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo , elemento.descricao,elemento.url , elemento.imagem)))
}

listaVideos();