Here is a snippet of 3 buttons
const [role, setRole] = React.useState('')
const [active, setActive] = React.useState(false)
<Grid container spacing={1}>
<Grid item xs={4}>
<Button variant='plain' value={role} onClick={e => setState(e.target.value)}>
User
</Button>
</Grid>
<Grid item xs={4}>
<Button variant='plain' value={role} onClick={e => setState(e.target.value)}>
Admin
</Button>
</Grid>
<Grid item xs={4}>
<Button variant='plain' value={role} onClick={e => setState(e.target.value)}>
Super Admin
</Button>
</Grid>
What I want to do is toggle between buttons, such that when one is selected, the other 2 active to false so i can change the color of the active and inactive buttons
I think you are using the useState hook wrong. In the beginning, you set up states for role and active, but then you don't use their set methods (which would be setRole and setActive). Instead, you use setState, which i don't think is defined here.
Apart from that, it seems like you want to track active, as a boolean. That's not going to work, since you need to know which one of the three buttons is active.
I suggest changing the state of active to an integer. This way, you can number the buttons, and safe the number.
So in each onClick method, you call setActive() with the correct button number.
E.g.: For button 1:
setActive(1);
I've tried to show what I mean here: