How can i create components and containers in App.js when tsparticles pacakage is installed?

I have started the app by using this “create-react-app your_app –template particles” and it works but when i created a components folder, which contains four different folders and four different files then it started giving me different bugs issues.This is the code have written that is not working. What am i writing wrongly in this code proffessional in the house help me out. Thanks

import React, { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadFull } from "tsparticles";
import Navigation from "./Components/Navigations/Navigation";
import Logo from "./Components/Logos/Logo.js";
import ImageLinkForm from "./Components/ImageLinkForm/ImageLinkForm";
import Rank from "./Components/Ranks/Rank";
import "./App.css";
import particlesConfig from "./particles.json";

function App() {
  const [init, setInit] = useState(false);

  useEffect(() => {
    if (!init) {
      initParticlesEngine(async (engine) => {
        await loadFull(engine);
      }).then(() => {
        setInit(true);
      });
    }
  }, [init]);

  return (
    <div className="App">
      {init && <Particles options={particlesConfig} />}
      {/* Your other components */}
      {<Navigation />}
      {<Logo />}
      {<Rank />}
      {<ImageLinkForm />}
    </div>`your text`
  );
}

export default App;