RadioGroup not getting the correct values from the radio buttons - Material UI

Question

I followed the documentation of Material UI to create a RadioGroup with four different options. Each option is in a FormControlLabel. This is how my code looks like:

App.js

import React from "react";
import "./styles.css";
import QuestionRadios from "./QuestionRadios";

export default function App() {
  return (
    <div className="App">
      <QuestionRadios
        firstOption={"Option 1"}
        secondOption={"Option 2"}
        thirdOption={"Option 3"}
        fourthOption={"Option 4"}
      />
    </div>
  );
}

QuestionRadios.js

import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

export default function QuestionRadios(props) {
  const [value, setValue] = React.useState("");

  const handleChange = event => {
    setValue(event.target.value);
    console.log(value);
  };

  return (
    <FormControl component="fieldset" style={{ marginLeft: 8, marginTop: 6 }}>
      <FormLabel component="legend">Choose one option.</FormLabel>
      <RadioGroup
        aria-label="option"
        name="option"
        value={value}
        onChange={handleChange}
      >
        <FormControlLabel
          value="option1"
          control={<Radio />}
          label={props.firstOption}
        />

        <FormControlLabel
          value="option2"
          control={<Radio />}
          label={props.secondOption}
        />

        <FormControlLabel
          value="option3"
          control={<Radio />}
          label={props.thirdOption}
        />
        <FormControlLabel
          value="option4"
          control={<Radio />}
          label={props.fourthOption}
        />
      </RadioGroup>
    </FormControl>
  );
}

When I click on the first radio button I am expecting the console to show option1, instead it shows an empty string. When I clicked the radio button below it then option1 gets printed out. First click will always be an empty string and then the other buttons will show different values when clicked in different order. I really don't understand what is going on as I have followed the documentation of Material UI.

EDIT: I have updated the code and given a CodeSandBox link demonstrating the issue.

Any help would be nice, thanks!