now im learning about Three JS and now im in blocker that my expectation should be like this:

but now my code not shows any view, where my code was like this:

import { useEffect } from "react/cjs/react.development";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default () => {
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      1,
      1000
    );
    const canvas = document.querySelector("canvas.background");
    let renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    new OrbitControls(camera, renderer.domElement);

    const img = new Image();
    let texture = new THREE.Texture(img);
    img.onload = () => {
      texture.needsUpdate = true;
      const material = new THREE.PointsMaterial({
        size: 20,
        map: texture,
        blending: THREE.AdditiveBlending,
        transparent: true,
        depthTest: false,
      });
      const particle = new THREE.Sprite(material);
      particle.scale.x = particle.scale.y = 1;
      scene.add(particle);
    };
    img.src = "/flower.png";
    scene.add(camera);

    camera.position.z = 3;
    const animate = () => {
      const elapsedTime = new THREE.Clock().getElapsedTime();

      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return <canvas className="background" />;
};

I tried different answers from forum, but seems doesn't works for me

could you guys help? I'll appreciate