Full width material-ui Button within a Badge?

Question

I have a Button inside a Grid and was using fullWidth to expand it to fill the container.

This worked fine, until I wrapped it in a Badge. Now the fullWidth property is ignored and the button is default width.

Worked fine:

<Button variant={"outlined"} color={"secondary"} fullWidth>
    Todo
</Button>

Now not working:

<Badge badgeContent={4} color={"secondary"}>
    <Button variant={"outlined"} color={"secondary"} fullWidth>
        Todo
    </Button>
</Badge>

How can I get the button to expand to fill its parent?

import React, {Component} from 'react';
import Grid from "@material-ui/core/Grid/Grid";
import Button from "@material-ui/core/Button/Button";
import Badge from "@material-ui/core/Badge/Badge";


export default class App extends Component {
    render() {
        return (

            <Grid container style={{margin: 10}}>
                <Grid item xs={2}>

                    <Badge badgeContent={4} color={"secondary"}>
                        <Button variant={"outlined"} color={"secondary"} fullWidth>
                            Todo badge
                        </Button>
                    </Badge>

                    <Button variant={"outlined"} color={"secondary"} fullWidth>
                        Todo no badge
                    </Button>
                </Grid>
                <Grid item xs={10}>

                </Grid>
            </Grid>
        );
    }
};

Answer 1

you have to apply fullWidth property to badge

<Badge badgeContent={4} color={"secondary"} fullWidth>
    <Button variant={"outlined"} color={"secondary"}>
        Todo
    </Button>
</Badge>