Stars and 3D earth in Three.js – canvas and orbit control issue

I have been trying to get my 3D earth to work properly, every time I refresh the page it zooms in even after I set enableZoom to false.

When I add Stars into the mix, it won’t allow me to adjust earth at all – zooming in or out.

I have tried rearranging stars and canvas component hoping it would make a difference but so far no matter what I do, Earth and Star components won’t budge. I thought it could be a z-index issue but it did nothing.

import React from "react";
import styled from "styled-components";
import Navbar from "./Navbar";
import Earth from "./Earth";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stars } from "@react-three/drei";




const Section = styled.div`
  height: 100vh;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    height: 200vh;
  }
`;

const Container = styled.div`
  height: 100%;
  scroll-snap-align: center;
  width: 1400px;
  display: flex;
  justify-content: space-between;

  @media only screen and (max-width: 768px) {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
`;

const Left = styled.div`
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-left: 70px;
  align-items: center;
  justify-content: center;

  @media only screen and (max-width: 768px) {
    flex: 1;
    align-items: center;
  }
`;

const Title = styled.h1`
  font-size: 74px;
  color: white;
  line-height: 0.7;

  @media only screen and (max-width: 768px) {
    text-align: center;
  }
`;

const WhatWeDo = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;


const Subtitle = styled.h2`
  color: #da4ea2;
`;

const Desc = styled.p`
  font-size: 24px;
  color: lightgray;
  line-height: 1.3;
  text-align: center;

  @media only screen and (max-width: 768px) {
    padding: 20px;
    text-align: center;
  }
`;

const Button = styled.button`
  background-color: #da4ea2;
  color: white;
  font-weight: 500;
  width: 100px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;


const Right = styled.div`
  flex: 3;
  position: relative;
  @media only screen and (max-width: 768px) {
    flex: 1;
    width: 100%;
  }

`;

const CanvasContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
`;


const EarthCanvas = styled.div`
  flex: 2;
  width: 800px;
  height: 600px;
  object-fit: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  @media only screen and (max-width: 768px) {
    width: 300px;
    height: 300px;
  }
`;



const Hero=()=> {
  return (

    <>
     <CanvasContainer>
      <Canvas >
          <Stars />
          <OrbitControls enableZoom={false} />
        </Canvas>
     </CanvasContainer>


    <Section id='hero'>
      <Navbar />
      <Container>
        <Left>
          <Title></Title>
          <WhatWeDo>
            <Subtitle>Software Developer</Subtitle>
          </WhatWeDo>
          <Desc>
          </Desc>
          <Button onClick={() => pageSelect('#Contact')}>Contact Me</Button>
        </Left>


        <Right>
          <EarthCanvas>
            <Canvas>
                <OrbitControls enableZoom={false} autoRotate={true} autorotateSpeed={2.0} />
                <ambientLight intensity={0.5} />
                <pointLight position={[10, 5, 10]} />
                <Earth />
            </Canvas>
          </EarthCanvas>
        </Right>
      </Container>
    </Section>
  </>
  );
};


export default Hero;