<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}>
<FormLabel component="legend">Format</FormLabel>
<RadioGroup row aria-label="format" name="format" onChange={changeHandler} inputRef={register({ required: true })}>
<FormControlLabel value="radio" control={<Radio inputRef={register({ required: true })} />} label="Radio" />
<FormControlLabel value="podcast" control={<Radio inputRef={register({ required: true })} />} label="Podcast" />
<FormControlLabel value="both" control={<Radio inputRef={register({ required: true })} />} label="Both" />
</RadioGroup>
</FormControl>
My issue with this FormControl is that all the FormControlLabels are aligning to the left (as seen in the image)
What I am aiming for is to evenly space them out from left to right on the screen.