react-simple-typewriter refreshing page and tsParticles gets reloaded

I have a landing page with tsParticles running in the background, and I also have react-simple-typewriter running, and it refreshes the page each time a letter is added, and that makes the particles refresh each time, is there something I can do to prevent this from happening?

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import Background from './Background/Background';
import { Typewriter, useTypewriter, Cursor } from 'react-simple-typewriter'


export default function Home() {
  const {text} = useTypewriter({
    words: ['I\'m a full stack developer.'],
    loop: 1, // Infinite
  })
  return (
    <div className={styles.container}>
      <Background />
        <main className={styles.main}>
          <h1 className={styles.title}>hero Title</h1>
          
          <h2 className={styles.subtitle}>{text}<Cursor /></h2>
        </main>
    </div>
  )
}

Background.js

import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const Background = () => {
  const particlesInit = async (main) => {

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  const particlesLoaded = (container) => {
  };
  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={
        {
          "fullScreen": {
              "enable": true,
              "zIndex": 1
          },
          "fpsLimit": 120,
          "particles": {
              "number": {
                  "value": 80,
                  "density": {
                      "enable": true,
                      "value_area": 800
                  }
              },
              "color": {
                  "value": "#ff0000",
                  "animation": {
                      "enable": true,
                      "speed": 20,
                      "sync": true
                  }
              },
              "opacity": {
                  "value": 0.5
              },
              "size": {
                  "value": {
                      "min": 0.1,
                      "max": 3
                  }
              },
              "links": {
                  "enable": true,
                  "distance": 100,
                  "color": "#ffffff",
                  "opacity": 0.4,
                  "width": 1
              },
              "move": {
                  "enable": true,
                  "speed": 6,
                  "direction": "none",
                  "outModes": {
                      "default": "out"
                  }
              }
          },
          "interactivity": {
              "events": {
                  "onHover": {
                      "enable": true,
                      "mode": "repulse"
                  },
                  "onClick": {
                      "enable": true,
                      "mode": "push"
                  },
                  "resize": true
              },
              "modes": {
                  "repulse": {
                      "distance": 200
                  },
                  "push": {
                      "quantity": 4
                  }
              }
          },
          "detectRetina": true,
          "background": {
              "color": "#000000"
          }
      }
      }
    />
  );
};

export default Background;

Any ideas? Thanks. Can I try and make the particles as a canvas and not a window? and will it actually make a difference? Is there any existing fix for it, because I've seen websites with this kind of things and a typewriter effect, should I just change the library I'm using?

So after some research, I found the answer, it's not the whole the whole page that refreshes, but the component, so instead of using the background in the refreshing component, I just used another component to wrap everything and the background component would not update with the home component.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import Background from './Background/Background';
import { Typewriter, useTypewriter, Cursor } from 'react-simple-typewriter'


function Home() {
  const {text} = useTypewriter({
    words: ['I\'m a full stack developer.'],
    loop: 1, // Infinite
  })
  return (
    <div className={styles.container}>
        <main className={styles.main}>
          <h1 className={styles.title}>Itamar Cohen</h1>
          <h2 className={styles.subtitle}>{text}<Cursor /></h2>
        </main>
    </div>
  )
}

const Wrapper = () => {
  return (
    <><Background /><Home /></>
  )
}

export default Wrapper;