Environment are not probably rendering when there's a model in three-drei

Question

thats how i render my environment

const Three = () => {
  return (
    <>
        <PerspectiveCamera makeDefault position={[0,3,10]} />
        <OrbitControls  />
        <directionalLight args={[0xffffff, .5]} position={[-5,20,0]} castShadow />
        <spotLight args={[0xffffff]} position={[0,10,0]} castShadow />

        <Model scale={0.5} />
      
        <Environment background>
          <mesh scale={100}>
            <sphereGeometry args={[1, 64, 64]} />
            <meshBasicMaterial  side={THREE.BackSide} />
          </mesh>
        </Environment>


    </>
  )
}

export default Three  

thats my app.js

function App() {
  return (
    <div>
      <Canvas 
      style={{height:'100vh',backgroundColor:'transparent'}}
      shadows
      >
        <Three />
        
      </Canvas>
    </div>
  )
}

export default App

the output after hard refresh

the output after changing a state or normal refresh when saving in vite

ps : the environment works fine when i remove the model i tried to use different compression , different models i still have the same issue do anyone know what is causing the issue ?!