react-tsparticles is hiding my other components when i just want it to be a backgroud

Question

so I am using React TS-particles and React three.JS for my Personal Portfolio Website and I have an issue.

So i am using React ts-particles to create a background of stars which works perfectly fine but when I add my Home component, it is displayed inside the stars background. I also have a rotating 3d Moon which doesnt go inside the stars background and works perfectly fine as you can see in this image

The code for my ./src/App.js file is

import React from 'react';
import Home from './components/Home';
import Moon from './components/Moon';
import { Suspense } from 'react';
import * as THREE from 'three'
import './App.css'
import {Canvas} from "@react-three/fiber"
import styled from "styled-components";
import Stars_Background from './components/Stars_Background.jsx';

const CanvasContainer = styled.div`
  width: 150%;
  height: 50%;
`;

function App() {
  
  return (
    <div>
      
      <Home/>
      <CanvasContainer >
        <Canvas  className='canvas' >
          <Suspense fallback={null}>
          <Moon  className='canvas' />
          </Suspense> 
       </Canvas>
     </CanvasContainer>
     
      
    </div>
  );
}

export default App;

The following is my code for the ./src/components/Stars_Background.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Particles from "react-tsparticles";


function Stars_Background() {
  const particlesInit = (main) => {
    console.log(main);

   
  };

  const particlesLoaded = (container) => {
    console.log(container);
  };

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={{

        background: {
          color: {
            value: "#000000",
          },
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: "push",
            },
            onHover: {
              enable: false,
              mode: "repulse",
            },
            resize: true,
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: "#ffffff",
          },
          links: {
            color: "#ffffff",
            distance: 150,
            enable: false,
            opacity: 0.4,
            width: 1,
          },
          collisions: {
            enable: true,
          },
          move: {
            direction: "none",
            enable: true,
            outMode: "bounce",
            random: true,
            speed: 2,
            straight: false,
          },
          fullScreen: {
            enable: true,
            zIndex: 0
          },
          number: {
            density: {
              enable: true,
              area: 500,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            random: true,
            value: 1,
          },
        },
        detectRetina: true,
      }}
    />
  );
}

export default Stars_Background;

my code for the moon in ./src/components/Moon.jsx is

import React from 'react';
import { useRef} from 'react';
import ReactDOM from 'react-dom';
import * as THREE from 'three'
import { useLoader, useFrame } from "@react-three/fiber";
import { TextureLoader } from "three/src/loaders/TextureLoader";
import {OrbitControls} from '@react-three/drei'
import moonPic from '../assets/textures/moon.jpeg'




function Moon() {

  const colorMap = useLoader(TextureLoader, moonPic) //adds texture to sphere

  const moonRef = useRef();
  

  useFrame(({ clock }) => {
    const elapsedTime = clock.getElapsedTime();

    moonRef.current.rotation.y = elapsedTime / 6;
    
  });

  return (
    <mesh scale={3.01} ref={moonRef} >
       <ambientLight intensity={1} />
        
      <sphereGeometry visible args={[1,64,64]}     />
      <meshStandardMaterial map={colorMap}/>
      <OrbitControls 
      enableZoom={false}  
      
      enableRotate={true}
      
      rotateSpeed={0.6}         
      />
      
    </mesh>
      
    
  );
}

export default Moon;

my ./src/components/Home.jsx code is

import React from 'react'
import './Home.css'

function Home() {
  return (
    
    <div className="home__meta">
      
    <h1 className="home__text pz__10">WELCOME TO MY WORLD</h1>
    <h2 className="home__text pz__10">Hi, I’m John,</h2>
    <h3 className="home__text sweet pz__10"> a Software Developer.</h3>
    
   
   
    
    
  </div>
  )
}

export default Home

and my Home.css file is

h1.home__text{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 3px;
  color: white
}
h2.home__text{
  font-size: 54px;
  line-height: 54px;
  font-weight: 800;
  font-family: Montserrat,sans-serif;
  color: red
}
h3.home__text{
  font-size: 50px;
  font-weight: 800;
  font-family: Montserrat,sans-serif;
  line-height: 40px;
  color: red
}
h4.home__text{
  font-size: 50px;
  font-weight: 800;
  line-height: 40px;
  font-family: Montserrat,sans-serif;
  color: white
  
}

If i get rid of the star background from App.js, the text displays perfectly fine

Answer 1

I've got same issue as yours, after applying React-tsparticles, some of component become invisible. In the end, found out it was "background color" that made components invisible.

Deleting the code below from Stars_Background.jsx should solve the issue.

background: {
  color: {
    value: "#000000",
  },
},