Add separations in circular progress material ui

Question

I'm working with a step form that shows that increments 25% with each step crossed. I want to have four separators in between. How can I achieve that

 <Box
                position="relative"
                display="inline-flex"
                style={{ marginTop: "50px" }}
                onClick={anotherQuestion}
              >
                <CircularProgress
                  // className={classes.progressbar}
                  variant="determinate"
                  value={progress}
                  size={100}
                  sx={{
                    color: "#ffae00",
                  }}
                />
                <Box
                  top={12}
                  left={0}
                  // bottom={0}
                  right={0}
                  position="absolute"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                >
                  <img
                    src={arrowImage}
                    className={classes.arrow}
                    alt="arrowImage"
                  />
                </Box>
              </Box>