Viewer is adding two cesium widgets in production when using resium why?

Question

import fullScreenWindow from “…/…/…/…/common/utils/fullScreenWindow”;
import { Scene, ScreenSpaceCameraController, Viewer } from “resium”;
import { CesiumTerrainProvider, Ion, SceneMode, createWorldTerrainAsync } from “cesium”;
import { clockViewModel } from “…/…/…/…/common/utils/cesiumDataHandler”;
import { useEffect, useState } from “react”;

Ion.defaultAccessToken = process.env.REACT_APP_CESIUMTOKEN;

const terrianProvider = { data: null };

createWorldTerrainAsync().then((terrain) => {
  terrianProvider.data = terrain;
}).catch((err) => {
  console.log("Error in cesium comp");
  console.log(err);
});

const CesiumFlightPath3D = (props) => {
  // const [terrainProvider, setTerrainProvider] = useState(null);

  // useEffect(() => {
  //   const loadTerrain = async () => {
  //     try {
  //       const terrain = await createWorldTerrainAsync();
  //       setTerrainProvider(terrain);
  //       let ele = document.getElementById("viewer3d");
  //       console.log(ele)
  //       console.log("Got terrain");
  //       console.log(terrain);
  //     } catch (error) {
  //       console.error("Error in cesium comp", error);
  //       alert("Encountered an error while loading terrain tiles, invalid access token or no internet connection!");
  //     }
  //   };

  //   loadTerrain();
  // }, []); // E

  return (
    <>
      <div className={props.ispointerEventDisable ? 'h-100 w-100 pe-none' : 'h-100 w-100'} id="viewer3dWrap">
        <Viewer
          id="viewer3d"
          className="viewer"
          terrainProvider={terrianProvider.data}
          defaultAccessToken={Ion}
          ref={e => {
            if (e) { console.log("REF called "); props.setViewer3D(e.cesiumElement); }
          }}
          clockViewModel={clockViewModel}
          sceneMode={SceneMode.SCENE3D}
          baseLayerPicker={false}
          vrButton={false}
          homeButton={false}
          sceneModePicker={false}
          projectionPicker={false}
          navigationHelpButton={false}
          animation={false}
          timeline={false}
          fullscreenButton={false}
          infoBox={false}
          geocoder={false}
        >
          {/* <Scene></Scene> */}
        </Viewer>
      </div>
    </>
  );
};

export default CesiumFlightPath3D;

Viewer is adding two cesium widgets in production why? Same below code works fine in development. But on production, the viewer adds two cesium widgets one is empty and the other one is showing the required animation. Do we have to do any special configuration to run the code smoothly on the server?