The model of the entity created using craco-cesium does not appear on the map

Question

I am working on creating 3D maps with Cesium in the Typescript React project. I use craco-cesium for this, but the entity's model does not appear on the map.

Here is the code of App.tsx;

import Cesium, { Math, Entity, HeadingPitchRoll, Quaternion, Transforms, Viewer, Cartesian3, ConstantProperty, Cartesian2, Terrain, NearFarScalar, Color, Cartographic, JulianDate, SampledPositionProperty, HeightReference } from "cesium";
import React, { useEffect, useRef } from "react";
import "./App.css";

let map: Viewer|undefined = undefined;


function App() {
  const long =36.933333;
  const lat =37.583333;
  const divRef = useRef<HTMLDivElement>(null);
  const position= Cartesian3.fromDegrees(
    long,
    lat,
    700.0
  );
  const position2= Cartesian3.fromDegrees(
    32.8597,  // Longitude (degrees)
    39.9334,  // Latitude (degrees)
    1000
  );

  const heading: number = Math.toRadians(0);
  const pitch: number = Math.toRadians(-90);
  const roll: number = 0;
  const hpr = new HeadingPitchRoll(heading, pitch, roll);
  const orientation= Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );
  const startPosition = Cartesian3.fromDegrees(
    35.1430,  // Longitude (degrees)
    39.1702,  // Latitude (degrees)
    1800000    // Altitude (meters)
  );
  
  useEffect(() => {
    if (divRef.current && map === undefined) {
      const map = new Viewer(divRef.current,{
        infoBox: false,
        selectionIndicator: false,
        shadows: false,
        shouldAnimate: true,
        timeline: false,
        animation : false,
        terrain: Terrain.fromWorldTerrain()      
      });
      map.cesiumWidget.creditDisplay.container.style.display = 'none';
      const entity= map.entities.add({
        name: "../models/a319.glb",
        position: position,
        model: {
          uri: "../models/a319.glb",
          //heightReference: HeightReference.RELATIVE_TO_GROUND,
          minimumPixelSize: 128,
          maximumScale: 1500,
          silhouetteColor: Color["YELLOW"],
          silhouetteSize:3.0,
        },
        label: {
          text: new ConstantProperty("A319"), // Set the label text
          show: true,
          pixelOffset: new Cartesian2(0, -100), // Adjust the offset to position the label
          scale:1,
          scaleByDistance: new ConstantProperty(
            new NearFarScalar(1.0e4, 1, 1.0e6, 0.5)
          ),
        }
      });
      const ent= map.entities.add({
        name: "../models/a319.glb",
        position: position2,
        model: {
          uri: "../models/model.gltf",
          minimumPixelSize: 128,
          maximumScale: 1500,
          silhouetteColor: Color["YELLOW"],
          silhouetteSize:3.0,
        },
        label: {
          text: new ConstantProperty("A319 Label"), // Set the label text
          show: true,
          pixelOffset: new Cartesian2(0, -100), // Adjust the offset to position the label
          scale:1,
          scaleByDistance: new ConstantProperty(
            new NearFarScalar(1.0e4, 1, 1.0e6, 0.5)
          ),
        },
      });
      map.camera.flyTo({
        destination: startPosition,
        orientation: {
          heading,
          pitch,
          roll,
        },
        duration: 0,
      });
      const sampledPosition = new SampledPositionProperty();
    sampledPosition.addSample(JulianDate.now(), position);

    // Update the position every second
    const updateInterval = setInterval(() => {
      const currentTime = JulianDate.now();
      const currentSample = sampledPosition.getValue(currentTime);
      if(currentSample){
         const currentLongitude = Math.toDegrees(
        Cartographic.fromCartesian(currentSample).longitude
      );

      // Increment the longitude value by 1
      const newLongitude = currentLongitude + 300;

      // Add a new sample with the updated position
      sampledPosition.addSample(currentTime, Cartesian3.fromDegrees(
        newLongitude,
        lat,
        700.0
      ));
      entity.position = sampledPosition;
      }
      // Set the entity position to the sampled position
    }, 1000);

    // Clean up the interval on component unmount
    return () => {
      
      map.destroy();
    };
  }
}, []);
  const updatePosition = () => {}
  
  return (
    <div className="App">
      <header className="App-header">
        <div style={{width:"100%",height:"57rem"}} className="cesium" ref={divRef} />
      </header>
    </div>
  );
}
export default App;

and here is the craco.config.js code

module.exports = {
  
  plugins: [
    { plugin: require("craco-cesium")() }
  ]
};

Do you have any suggestion for this issue. Thanks.

I am working on creating 3D maps with Cesium in the Typescript React project. I use craco-cesium for this, but the entity's model does not appear on the map.