different flex-basis property in console than set in sx styling in code

I'm using the sx prop in MUI to style my components, so here I apply it to my Grid - specifically looking at the flexBasis: 'auto' piece:

return (<Grid            container            spacing={2}            sx={{ width: '100%', marginTop: theme => theme.spacing(1), justifyContent: 'flex-end' }}><Grid item xs={12} sm={3} sx={{ flexGrow: 0, flexBasis: 'auto' }}><ExpandAllButton expandAll={expandAll} /></Grid><Grid item xs={12} sm={3} sx={{ flexGrow: 0, flexBasis: 'auto' }}><CollapseAllButton collapseAll={collapseAll} /></Grid></Grid>    );

Then, in the chrome console this is what I'm seeing for that second MUI Grid item:It's set to flex-basis: 25%

Additionally, I noticed that nothing I add to the sx prop shows up on refresh in the console. So why isn't the sx prop registering?

I was using makeStyles before this, so I know that works, but I'm trying to transfer those same properties into using sx prop for styling.