MUI Radio button disabled change value when Select drop down changes

Question

My problem is that when I change a value in a dropdown I want to disable two radio buttons and change to the correct radio button. I am able to disable the radio buttons but not able to change the value to the one that isn't disabled. This might sound very complicated but I have made a code sandbox showing an example making it very simple to understand what goes wrong. So in the example which is the same as the code below. When the dropdown gets changed to buildings, both and colors should be disabled(Which happens now) but I also want it to autoselect the "Citys" radio button. https://codesandbox.io/s/competent-austin-igz4uh?file=/src/App.js:0-1905

What I have tried so far: I have tried using a useEffect to change when the select dropdown changes but it didn't work.

import "./styles.css";
import {
  FormControl,
  FormLabel,
  RadioGroup,
  Radio,
  FormControlLabel,
  InputLabel,
  Select,
  MenuItem
} from "@material-ui/core";
import React, { useState, useEffect } from "react";
export default function App() {
  const [chosenSorting, setChosenSorting] = useState("colors");
  const [sortingType, setSortingType] = useState("both");
  function handleChange(event) {
    setChosenSorting(event.target.value);
  }
  useEffect(() => {
    if (chosenSorting === "colors") {
      setSortingType("colors");
    }
  }, [chosenSorting]);
  return (
    <>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Chosen Sorting</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={chosenSorting}
          label="Chosen Sorting"
          onChange={handleChange}
        >
          <MenuItem value={"colors"}>Colors</MenuItem>
          <MenuItem value={"buildings"}>Buildings</MenuItem>
        </Select>
      </FormControl>
      <FormControl>
        <FormLabel id="demo-radio-buttons-group-label">
          Fylke or Kommune
        </FormLabel>
        <RadioGroup
          row
          defaultValue="both"
          onChange={(e) => setSortingType(e.target.value)}
        >
          <FormControlLabel
            disabled={chosenSorting === "buildings"}
            control={<Radio />}
            value="both"
            label="Both"
          ></FormControlLabel>
          <FormControlLabel
            control={<Radio />}
            disabled={chosenSorting === "buildings"}
            value="colors"
            label="Colors"
          ></FormControlLabel>
          <FormControlLabel
            control={<Radio />}
            value="citys"
            label="Citys"
          ></FormControlLabel>
        </RadioGroup>
      </FormControl>
    </>
  );
}

Answer 1

You should add value={sortingType} to RadioGroup props
and and chosenSorting === "buildings" condition to useEffect :

useEffect(() => {
    if (chosenSorting === "colors") {
      setSortingType("colors");
    }
    if (chosenSorting === "buildings") {
      setSortingType("citys");
    }
}, [chosenSorting]);


<RadioGroup
   row
   onChange={(e) => setSortingType(e.target.value)}
   value={sortingType}
>
</RadioGroup>