Lottie animations bottleneck the DOM

[ghost]

There's a weird issue with Lottie animations in React/Gatsby. I've tried many plugins like react-lottie, lottie-react, lottie-web etc. They all start bottlenecking the dom while navigating back and forth pages.

I've made an example with the issue: https://elegant-aryabhata-490c95.netlify.app/ If you navigate between the pages Go to page 2 and Go back to the homepage, soon enough the DOM stops and the animation starts rendering extra stuff as well.

I am rendering the animations like so:

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Lottie from "react-lottie"
import * as animationData from "../components/assets/data.json"

const IndexPage = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  }
  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      {/* <StaticImage
        src="../images/gatsby-astronaut.png"
        width={300}
        quality={95}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="A Gatsby astronaut"
        style={{ marginBottom: `1.45rem` }}
      /> */}
      <p>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Lottie options={defaultOptions} height={400} width={400} />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </p>
    </Layout>
  )
}

export default IndexPage

I have a plain HTML version as well https://upbeat-lewin-aabd01.netlify.app/ which has no issues. It looks like a memory leak or something but have no idea how to debug this.