React and three js high memory usage

Question

Memory usage of the website is increasing even though I clear previous page. Here is my pages and util functions.

Earth Page:

import { useEffect } from "react";
import { createScene, createPlanet } from "../utils";
import PlanetPage from "../components/PlanetPage/PlanetPage";
import earth from "../images/earth.jpg";

const Earth = () => {
  useEffect(() => {
    localStorage.clear();
    createScene(createPlanet, earth);
    return () => {
      localStorage.setItem("clear", true);
    };
  }, []);
  return (
    <PlanetPage
      planetName="Earth"
      planetInfo="Earth is the third planet from the Sun and the only astronomical object known to harbor life. While large amounts 
      of water can be found throughout the Solar System, only Earth sustains liquid surface water. About 71% of 
      Earth's surface is made up of the ocean, dwarfing Earth's polar ice, lakes and rivers. 
      The remaining 29% of Earth's surface is land, consisting of continents and islands."
    />
  );
};

export default Earth;

Mars Page:

import { useEffect } from "react";
import { createScene, createPlanet } from "../utils";
import PlanetPage from "../components/PlanetPage/PlanetPage";
import mars from "../images/mars.jpg";

const Mars = () => {
  useEffect(() => {
    localStorage.clear();
    createScene(createPlanet, mars);
    return () => {
      localStorage.setItem("clear", true);
    };
  }, []);

  return (
    <PlanetPage
      planetName="Mars"
      planetInfo='Mars is the fourth planet from the Sun and the second-smallest planet in
      the Solar System, being larger than only Mercury. In English, Mars
      carries the name of the Roman god of war and is often referred to as the
      "Red Planet".'
    />
  );
};

export default Mars;

CreateScene:

import * as THREE from "three";

const createScene = (createPlanet, planetImage) => {
  const aspect = window.innerWidth / window.innerHeight;
  const canvas = document.querySelector("#webgl");
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(40, aspect, 1, 1000);
  camera.position.z = 2;
  scene.add(camera);
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  createPlanet(planetImage, scene, camera, renderer);
};

export default createScene;

CreatePlanet:

import * as THREE from "three";

const createPlanet = (planetImage, scene, camera, renderer) => {
  const planetGeometry = new THREE.SphereBufferGeometry(0.6, 32, 32);
  const texture = new THREE.TextureLoader().load(planetImage);
  let material = new THREE.MeshBasicMaterial({ map: texture });
  let planetMesh = new THREE.Mesh(planetGeometry, material);
  scene.add(planetMesh);
  const render = () => {
    renderer.render(scene, camera);
  };
  const animate = () => {
    if (localStorage.getItem("clear")) {
      while (scene.children.length > 0) scene.remove(scene.children[0]);
      texture.dispose();
      material.dispose();
      planetGeometry.dispose();
      renderer.dispose();
      planetMesh = undefined;
      return null;
    }
    if (planetMesh) planetMesh.rotation.y -= 0.0015;
    requestAnimationFrame(animate);
    render();
  };
  animate();
};

export default createPlanet;

I think there is a problem with my cleaning logic. Because memory usage of the website increasing every time I change the page between Earth and Mars. How can I properly clear previous scene?