tsparticles-preset-links doesn't appear

Question

I want to use tsparticles-preset-links, but it doesn't appear. I checked with inspect element, the <canvas> element appears inside the <div> with "tsparticles" id and no error appears in the console, but the particles doesn't appear.

I've also changed the background-color of the <div> (maybe because the particles are white so they're not visible) but it's still not showing

What's wrong? is there a script that i haven't included?

    <main>
      <section id="hero">
        <div class="container h-screen text-center" id="tsparticles">
          <div>
            <hgroup class="font-display text-2xl font-bold">
              <p>Hi there <span></span></p>
              <h1 class="text-4xl">I'm <span>Rafli</span> Sugiarto</h1>
            </hgroup>
          </div>
          <div>
            <img src="" alt="Rafli's picture" />
          </div>
        </div>
      </section>
    </main>
    <footer></footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-links@2/tsparticles.preset.links.min.js"></script>
    <script>
      (async () => {
        await tsParticles.load("tsparticles", {
          preset: "links",
        });
      })();
    </script>

The particles should appear because the element has also been generated