How to display two spheres on Google Map using Three.js

I’m creating React app using Three.js and Google Map API. Right now there are two spheres displayed on the map, however since they are located in same position you can’t see sphere2 because it’s overlapped. How do I adjust those two positions?

import { useState, useRef, useEffect } from "react";
import { Wrapper } from "@googlemaps/react-wrapper";
import * as THREE from "three";
import "./App.css";

const mapOptions = {
  center: {
    lat: 49.1816,
    lng: -122.84359,
  },
  zoom: 17,
  heading: 320,
  tilt: 90,
  mapId: "map-id",
};

const App = () => {
  return (
    <Wrapper apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}>
      <MyMap />
    </Wrapper>
  );
};

function MyMap() {
  const overlayRef = useRef();
  const [_map, setMap] = useState();
  const ref = useRef();

  useEffect(() => {
    if (!overlayRef.current) {
      const instance = new window.google.maps.Map(ref.current, mapOptions);
      setMap(instance);
      overlayRef.current = createOverlay(instance);
    }
  }, []);

  return <div ref={ref} id="map"></div>;
}

function createOverlay(map) {
  const overlay = new window.google.maps.WebGLOverlayView();
  let renderer, scene, camera, loader;

  overlay.onAdd = () => {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera();
    const light = new THREE.AmbientLight(0xffffff, 0.9);
    scene.add(light);

    const sphere1 = createSphere(15, 0xff0000);
    const sphere2 = createSphere(10, 0x0000ff);
    scene.add(sphere1, sphere2);
  };

  overlay.onContextRestored = ({ gl }) => {
    renderer = new THREE.WebGLRenderer({
      canvas: gl.canvas,
      context: gl,
      ...gl.getContextAttributes(),
    });
    renderer.autoClear = false;
  };

  overlay.onDraw = ({ transformer }) => {
    const latLngAltitudeLiteral = {
      lat: mapOptions.center.lat,
      lng: mapOptions.center.lng,
      altitude: 120,
    };
    const matrix = transformer.fromLatLngAltitude(latLngAltitudeLiteral);
    camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

    overlay.requestRedraw();
    renderer.render(scene, camera);
    renderer.resetState();
  };

  overlay.setMap(map);

  return overlay;
}

function createSphere(radius, color) {
  const geometry = new THREE.SphereGeometry(radius, 32, 16);
  const material = new THREE.MeshBasicMaterial({ color });
  const sphere = new THREE.Mesh(geometry, material);

  return sphere;
}

export default App;

After successfully displaying two spheres, I’m planning to show some icons instead of spheres based on position which I pull out from some API.