ButtonGroup gap isn't uniform - css

Question

I'll have 5 buttons in a group (labled: one, two, three, four, five) in a row. Between the buttons three and four is a larger gap than between other buttons. I'm assuming it has something to do with fractional width buttons creating larger gaps. I also tried manually doing margins. Same exact issue.
Image of the issue:
Storybook mdx:
<div style={{display: 'flex', flexDirection: "column"}}>
<div style={{paddingBottom: "15px", }}>
<Label>I'm the parent and this is the currently selected value(s) a recieved by the onChangeSelected prop: {JSON.stringify(values)}</Label>
</div>
<div style={{display: "flex", justifyContent: "center"}}>
<ButtonGroup onChangeSelected={(selectedValue: string[])=> handleOnSelect(selectedValue)} selectedValuesProp={passedValue} groupClass={args.groupClass} groupSize={args.groupSize} vertical={args.vertical} >
<Button value={ "one"}>one</Button>
<Button value={ "two"}>two</Button>
<Button value={ "three"}>three</Button>
<Button value={ "four"}>four</Button>
<Button value={ "five"}>five</Button>
</ButtonGroup>
</div>
<div style={{display: "flex", justifyContent: "center", marginTop: "15px"}}>
<Button onClick={()=> setPassedValue([])}>I clear the button group</Button>
</div>
</div>
relevant scss:
.btn-group {
#include font-defaults;
display: inline-flex;
// Force the buttons to adopt the overall group radius
border-radius: $button-group-border-radius;
overflow: hidden;
box-shadow: $button-shadow;
gap: 2px;
>.btn {
flex: 1 1 auto;
// Turn off the normal button radius and shadow that's now on the group
border-radius: 0;
box-shadow: none;
}
.btn-group-selected {
background-color: $accent-bg;
&:hover {
background-color: $accent-bg-hover;
}
&:active {
background-color: $accent-bg-active;
}
}
}
Any help would be much appreciated.