Poor performance using TRUNK

[simonbrage]

Using the TRUNK animation in my React app results in very poor performance by slowing down the app and impacting the responsiveness of buttons, etc. Any thoughts on what might cause this?

This is the page that includes the effect:

import React, { useState, useRef, useEffect } from "react";
import * as THREE from "three"; // Importing THREE.js
import TRUNK from "vanta/dist/vanta.trunk.min"; // Importing the vanta effect

export default function Home() {
    const [vantaEffect, setVantaEffect] = useState(0);
    const myRef = useRef(null);

    useEffect(() => {
      if(!vantaEffect) {
        TRUNK({
          THREE: THREE,
          el: myRef.current,
          color: 0x3B82F6,
          backgroundColor: 0xF9FAFB
        });
      }

      return () => {
        if (vantaEffect) {
          vantaEffect.destroy();
        }
      };
    }, [vantaEffect]);

    return (
      <section id="home" ref={myRef}>
        <div>
           {/* Buttons and text here */}
        </div>
      </section>
    );
  }

My App.js loads this page to make my React app navigable using react-router-dom:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import About from "./components/About";
import Projects from "./components/Projects";

export default function App() {
  return (
    <main>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/projects" element={<Projects />} />
        </Routes>
      </BrowserRouter>

    </main>
  );
}