Progress bar component not showing up within Group/Stack - reactjs

Question

Whenever I try to place a progress bar inside a Group/Stack, it does not show up on my webpage. It works only when I place it outside the Group/Stack. Here is the code and results:
import { Stack, ThemeIcon, Text, Progress, Group, Button } from "#mantine/core";
interface SkillProps {
name: string;
icon: JSX.Element;
}
function Skill(props: SkillProps) {
return (
<>
<Group>
<ThemeIcon size={50} radius={25} variant="outline">
{props.icon}
</ThemeIcon>
<Stack align="center" spacing={5}>
<Text>{props.name}</Text>
</Stack>
<Progress value={50} />
</Group>
</>
);
}
export default Skill;
When placed within Group/Stack: Result
When placed outside Group/Stack: Result
Anyone has any idea why this is happening?

Answer 1

It seems that this might be because Progress does not have a specified width from parent container when in Group or Stack.
For use in Group, try add flex:"1" to Progress with the sx prop, which will make it take the remaining space in Group:
<Group>
<ThemeIcon size={50} radius={25} variant="outline">
{props.icon}
</ThemeIcon>
<Stack align="center" spacing={5}>
<Text>{props.name}</Text>
</Stack>
<Progress value={20} sx={{ flex: "1" }} />
</Group>
For use in Stack, try add alignSelf: "stretch" instead for similar result:
<Group>
<ThemeIcon size={50} radius={25} variant="outline">
{props.icon}
</ThemeIcon>
<Stack align="center" spacing={5}>
<Text>{props.name}</Text>
<Progress value={20} sx={{ alignSelf: "stretch" }} />
</Stack>
</Group>