handleChange with React/Typescript

Question

I have this dropdown menu with MUI

I am trying to return a different Grid containing a different component, in this case Residential or Commercial depending on which value from the dropdown is selected with my handleBuilding method.

I know this is bad React practice so any other suggestions are welcomed but I would also like to fix it this way.

const quote = () => {

const [value, setValue] = useState('residential');

function handleBuilding(){
    console.log('test')    
}

if(value === 'residential') {
    return(
        <Grid container>
            <Grid item md={2}>
            <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">Select Building</InputLabel>
                <Select>
                    <MenuItem onClick={handleBuilding} value="residential">Residential</MenuItem>
                    <MenuItem onClick={handleBuilding} value="commercial">Commercial</MenuItem>
                    <MenuItem onClick={handleBuilding} value="corporate">Corporate</MenuItem>
                    <MenuItem onClick={handleBuilding} value="hybrid">Hybrid</MenuItem>
                </Select>
                </FormControl>
                <Residential />
            </Grid>
        </Grid>
    )
}
if(value === 'commercial') {
    return(
        <Grid container>
            <Grid item md={2}>
            <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">Select Building</InputLabel>
                <Select>
                    <MenuItem onClick={handleBuilding} value="residential">Residential</MenuItem>
                    <MenuItem onClick={handleBuilding} value="commercial">Commercial</MenuItem>
                    <MenuItem onClick={handleBuilding} value="corporate">Corporate</MenuItem>
                    <MenuItem onClick={handleBuilding} value="hybrid">Hybrid</MenuItem>
                </Select>
                </FormControl>
                <Commercial />
            </Grid>
        </Grid>
   
    )
}