Openlayers can't modify drawn features

I would like to make a chance for modifying my features in OpenLayers. So far I can only drag them across the map, but I can't change their shapes at all when drawn.

In the picture above you can spot the blue dot, which just moves along the shape border but is not able to modify it.

I tried to modify my code by using this example:

https://openlayers.org/en/latest/examples/draw-and-modify-geodesic.html

and my piece of code looks like this:

var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures({
   if (modifyPoint[0] === center[0] && modifyPoint[1] === center[1]) {
    first = transform(polygon[0], projection, 'EPSG:4326');
    last = transform(
      polygon[(polygon.length - 1) / 2],
      projection,
      'EPSG:4326'
    );
     radius = getDistance(first, last) / 2;
   } else {
     first = transform(center, projection, 'EPSG:4326');
     last = transform(modifyPoint, projection, 'EPSG:4326');
     radius = getDistance(first, last);
   }
   const circle = circular(
    transform(center, projection, 'EPSG:4326'),
    radius,
    128
   );
   circle.transform('EPSG:4326', projection);
   geometries[0].setCoordinates(circle.getCoordinates());
   // save changes to be applied at the end of the interaction
   modifyGeometry.setGeometries(geometries);
  ),
  });
   var translateInteraction = new ol.interaction.Translate({
   features: selectInteraction.getFeatures()
  });
  var setActiveEditing = function(active) {
  selectInteraction.getFeatures().clear();
  selectInteraction.setActive(active);
  modifyInteraction.setActive(active);
  translateInteraction.setActive(active);
};
setActiveEditing(true);

and the full fiddle is available here:

https://jsfiddle.net/2yj1ae04/

How can I make these features editable after drawing them in OpenLayers Map?

from Openlayers can't modify drawn features