How to draw circle shape border stroke drawn with separated lines?

Question

I'm trying to achieve this custom shape with Compose

But for some reason the separator offseted circle is drawn with a dotted line and here is the code

@Preview
@Composable
private fun ReceiptSeparator () {

    Row(modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp) ,
        verticalAlignment = Alignment.CenterVertically  ,) {
        Box(
            modifier = Modifier
                .requiredSize(50.dp)
                .background(Color.White)
                .offset(-40.dp)
                .clip(CircleShape)
                .border(BorderStroke(2.dp, Color.Gray))

        ){}

        Box(
            Modifier
                .height(1.dp)
                .requiredWidth(250.dp)
                .weight(3f)
                .background(Color.Gray, shape = DottedShape(step = 20.dp))
        ){}
        Box(
            modifier = Modifier

                .offset(40.dp)
                .clip(CircleShape)
                .border(BorderStroke(2.dp, Color.Gray))
                .background(Color.White)
                .size(50.dp)
        ){}
    }
}

Why the circle is drawn with a dotted line and how to achieve this shape correctly?

Answer 1

Get rid of:

shape = DottedShape(step = 20.dp)