Chakra UI spacing not matching expected defaults for padding and margin - reactjs

Question

I'm working on converting my app from rebass to chakra and currently dealing with a component that needs 16px padding on mobile, and 24px padding on tablet/desktop. In my component I have <Component px={[4, 6, 6]} />
Looking at this chart, I would expect to be able to use these numbers 4, 6 because I have confirmed the font-size is 16px. However, the actual values I'm seeing are 32px on mobile and 128px for tablet/desktop. I think something might be up with my chakra setup because I'm even unable to use inbetween values like 3.5, however I have had no problems with it so far.
My chakra setup is pretty simple at the moment because I'm early in the migration and I'm not messing with the default chakra values for the space key so I don't know what's causing these weird numbers.
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: false,
}
const Button: ComponentStyleConfig = {
baseStyle: {
fontWeight: 'bold',
},
variants: {
primary: {
letterSpacing: '-0.19px',
borderRadius: '30px',
paddingLeft: '45px',
paddingTop: '14px',
paddingRight: '45px',
paddingBottom: '14px',
height: '56px',
backgroundColor: colors.white,
color: colors.black,
},
},
// The default size and variant values
defaultProps: {
variant: 'primary',
},
}
const theme = {
colors,
styles: globalStyles,
components: {
Button,
},
}
export default extendTheme({ ...theme, config })