Button Material UI and React

Question

I wanted to follow the picture below. I'm using Material-UI and React. How can I do it like that? I want to follow the grey background with little space between the white background

Pls check codesandbox here CLICK HERE

   <Stack spacing={2} sx={{ height: "100%" }}>
      <ToggleButtonGroup
        sx={{ alignSelf: "center", paddingTop: "12px", paddingBottom: "12px" }}
        color="primary"
        value={alignment}
        exclusive
        onChange={handleChange}
      >
        <ToggleButton value="myBrands">My Brands</ToggleButton>
        <ToggleButton value="allBrands">All Brands</ToggleButton>
      </ToggleButtonGroup>
    </Stack>

Answer 1

Please take look into sandbox - https://codesandbox.io/s/togglebuttonsmultiple-material-demo-forked-81uom?file=/demo.js

Given 90% solution, please change colors.