MUI 5/6 border radius is different in default settings and when used with theme.shape.borderRadius

I am using Mui for my website and while constructing theme, I set my border radius to be

{
    palette: ...,
    shadows: ...,
    typography: ...,
    shape: {
      borderRadius: 3,
    },
  }

Now, when I import Button from MUI directly and use the buttton, it has border radius 3px checked in Chrome inspect. I have created another box using the theme.shape.borderRadius, it is more rounded having border radius: 9px.

Why is both different even though It should be referring to the same value I set in the theme.

<Button
  variant="contained"
    sx={{
     width: "100px",
     height: "36px",
     color: "black",
     backgroundColor: "white",
    }}
>
 Start now
</Button>
<Box
 sx={{
  width: "100px",
  height: "36px",
  color: "black",
  backgroundColor: "white",
  borderRadius: (theme) => theme.shape.borderRadius,

  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  }}
 >
  Start now
</Box>

Settings px explicity works but that’s not what I want to do.

borderRadius: (theme) => theme.shape.borderRadius+'px'