Cesium separate timeline widget is not working properly

I want to display cesium clock and timeline widget inside a different div container outside of the cesium container. With the help of this link I've created a separate clock widget and applied animation on an entity. Animation is working but the clock widget is not working. It seems like default clock widget is working not the newly created. Sandcastle link

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false, //Disable InfoBox widget
  selectionIndicator: false, //Disable selection indicator
  shouldAnimate: true, // Enable animations
  terrainProvider: Cesium.createWorldTerrain(),
});

//Enable lighting based on the sun position
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

var _currentSysDT = new Date(); 

function onTimelineScrubfunction(e) {
        clock = e.clock;
        clock.currentTime = e.timeJulian;
        clock.shouldAnimate = false;
    }

var timeControlsContainer = document.getElementById('timeControlsContainer');
  // viewer.animation.viewModel.timeFormatter = LocalFormatter;
var clock = new Cesium.Clock();
clock.startTime = Cesium.JulianDate.fromDate(_currentSysDT);
clock.currentTime = Cesium.JulianDate.fromDate(_currentSysDT);
clock.clockRange = Cesium.ClockRange.LOOP_STOP;

var clockViewModel = new Cesium.ClockViewModel(clock);
clockViewModel.startTime = Cesium.JulianDate.fromDate(_currentSysDT);
clockViewModel.currentTime = Cesium.JulianDate.fromDate(_currentSysDT);

var animationContainer = document.createElement('div');
animationContainer.className = 'cesium-viewer-animationContainer';
timeControlsContainer.appendChild(animationContainer);

var animViewModel = new Cesium.AnimationViewModel(clockViewModel);
var animation = new Cesium.Animation(animationContainer, animViewModel);
var timelineContainer = document.createElement('div');
timelineContainer.className = 'cesium-viewer-timelineContainer';
timeControlsContainer.appendChild(timelineContainer);

var timeline = new Cesium.Timeline(timelineContainer, clock);
timeline.addEventListener('settime', onTimelineScrubfunction, false);
timeline.zoomTo(clock.startTime, clock.stopTime);

clockViewModel.shouldAnimate = true;
animViewModel.snapToTicks = false;
animViewModel.pauseViewModel.command(); //comment this for default play
timeline.zoomTo(clock.startTime, Cesium.JulianDate.addSeconds(clock.startTime, 60, new Cesium.JulianDate()));
clock.onTick.addEventListener(function (clock) {
  
});

window.setInterval(function () {
    clock.tick();
}, 32);

var start = Cesium.JulianDate.addSeconds(Cesium.JulianDate.fromDate(_currentSysDT), 0, new Cesium.JulianDate());
var stop = Cesium.JulianDate.addSeconds(Cesium.JulianDate.fromDate(_currentSysDT), 120, new Cesium.JulianDate());

var positions = [{"lat":"23.14291673","lon":"73.60544359","alt":"33.79739465869949"},{"lat":"23.14291736","lon":"73.60558935","alt":"33.705623697852786"},{"lat":"23.14284330","lon":"73.60553133","alt":"33.280035949546644"},{"lat":"23.14284640","lon":"73.60546898","alt":"33.219775982790594"}];

var positionProperty = new Cesium.SampledPositionProperty();
positions.forEach((p,i)=>{
  let _pos = Cesium.Cartesian3.fromDegrees(parseFloat(p.lon), parseFloat(p.lat), parseFloat(p.alt));
  let _time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
  positionProperty.addSample(_time, _pos);

});

var entity = viewer.entities.add({
  //Set the entity availability to the same interval as the simulation time.
  availability: new Cesium.TimeIntervalCollection([
    new Cesium.TimeInterval({
      start: start,
      stop: stop,
    }),
  ]),

  //Use our computed positions
  position: positionProperty,

  //Automatically compute orientation based on position movement.
  orientation: new Cesium.VelocityOrientationProperty(positionProperty),

  //Load the Cesium plane model to represent the entity
  model: {
    uri: "../SampleData/models/CesiumMan/Cesium_Man.glb",
    minimumPixelSize: 64,
  },

  //Show the path as a yellow line sampled in 1 second increments.
  path: {
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.1,
      color: Cesium.Color.YELLOW,
    }),
    width: 10,
  },
});

viewer.trackedEntity = entity;

You need to create the viewer after the clockViewModel, and pass in the clockViewModel as a constructor option. For example:

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false, //Disable InfoBox widget
  selectionIndicator: false, //Disable selection indicator
  terrainProvider: Cesium.createWorldTerrain(),
  // Construct this viewer using your previously constructed clockViewModel.
  clockViewModel: clockViewModel,
  // Don't let this viewer build its own animation widget.
  animation: false,
  // Don't let this viewer build its own timeline widget.
  timeline: false
});

Here's the Updated Sandcastle Demo.