D3 join() only renders 'update' while doesn't show 'enter' elements

I tried to update an array of circles from the static positions to dynamic force layout positions.

I tried to apply different colors for the circles within 'update' range and apply another color to the new circles added from the new data.

however, newly added data nodes are not rendered for some reason.

Can anyone help me?

My update pattern is as below.

1.Initial Data Binding

let svg = d3.select('.graph')
            .attr('width',width)
            .attr('height',height)


svg.selectAll('circles').data(randoms)
   .join('circle')
   .attr('cx',d=>Math.random()*600)
   .attr('cy',d=>Math.random()*600)
   .attr('r',5)

2.Update Data binding

let simulation = d3.forceSimulation(randoms2)
                   .force('x', d3.forceX().x(function(d,i) {
                     if(i%2==0){
                       return 10;
                     }
                     else{
                       return 20
                     }
                   }))
                   .force('collision', d3.forceCollide().radius(function(d) {
                           return 1
                    }))
                   .on('tick',ticked)


function ticked(){
                    d3.selectAll('circle')
                    .data(randoms2)
                    .join(          enter =>enter.append('circle')
                                          .attr("fill", "green")
                                          .attr('cx', function(d) {return d.x})
                                          .attr('cy', function(d) {return d.y})
                                          .attr('r',5),
                      
                                update => update
                                    .attr("fill", "red"),
                      
                                exit => exit.remove()
                                ) 
                                    .transition().duration(100)
                                    .attr('cx', function(d) {return d.x})
                                    .attr('cy', function(d) {return d.y})

  }

It only shows the updated circles.

the complete code is in the following link.

https://codepen.io/jotnajoa/pen/xxEYaYV?editors=0001