materriel -ui ToggleButton looks like button - css

Question

I have a ToggleButton
I want the selection to look like a button
But when I put a button inside I get such an error in the console
const StyledToggleButtonGroup = withStyles((theme) => ({
grouped: {
margin: theme.spacing(0.5),
border: 'none',
},
}))(ToggleButtonGroup);
<StyledToggleButtonGroup size="medium" value={problem} exclusive onChange={handleChange}>
<ToggleButton color="red" value="technical" className={helpClasses.boxButton}>
<Button size="medium" fullWidth color="primary" variant="outlined">
{t('help.technical')}
</Button>
</ToggleButton>
</StyledToggleButtonGroup>
<DialogActions>
error in console
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
I want it to look like this

Answer 1

From the documentation, https://material-ui.com/components/toggle-button/
It says, you can put icons inside ToggleButton, or most likely anything other than Button.
Try follow the doc,
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>

Answer 2

I did it so
const classes = makeStyles((theme) => ({
boxToggleButton: {
borderRadius: '5px',
borderStyle: 'solid',
border: 1,
width: '6vw',
height: '6vw',
},
textToggleButton: {
color: colors.light.background,
fontWeight: 400,
fontSize: fontSizes.large,
},
}));
<ToggleButton value="Wrong identification ">
<Grid
container
justify="center"
alignItems="center"
item
className={classes.boxToggleButton}
>
<Typography className={classes.textToggleButton}>
{"wrongIdentification"}
</Typography>
</Grid>
</ToggleButton>;