I have a Stack of Avatars, with text:

<Stack>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Today</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#05C000' }} variant="square">V</Avatar>Yesterday</span>
    <span><Avatar sx={{ float:'left', width: 30, height: 30, margin: 1, backgroundColor: '#c00500' }} variant="square">C</Avatar>Yesterday</span>

</Stack>

I’d like to have a dotted line joining the boxes like this:

How can I achieve this effect?