I want to understand the correct approach when creating a Quiz App using React

I want to create small questions and answers using React, that is, a question is given, the user chooses an answer by clicking on the Radio button, then he clicks on the button and checks the question for such purposes, I want to use this example from the Material UI framework.

The question is that I am confused by the logic of the application, please look at this code

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(3),
  },
  button: {
    margin: theme.spacing(1, 1, 0, 0),
  },
}));

export default function ErrorRadios() {
  const classes = useStyles();
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState(false);
  const [helperText, setHelperText] = React.useState('Choose wisely');

  const handleRadioChange = (event) => {
    setValue(event.target.value);
    setHelperText(' ');
    setError(false);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (value === 'best') {
      setHelperText('You got it!');
      setError(false);
    } else if (value === 'worst') {
      setHelperText('Sorry, wrong answer!');
      setError(true);
    } else {
      setHelperText('Please select an option.');
      setError(true);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormControl component="fieldset" error={error} className={classes.formControl}>
        <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
        <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
          <FormControlLabel value="best" control={<Radio />} label="The best!" />
          <FormControlLabel value="worst" control={<Radio />} label="The worst." />
        </RadioGroup>
        <FormHelperText>{helperText}</FormHelperText>
        <Button type="submit" variant="outlined" color="primary" className={classes.button}>
          Check Answer
        </Button>
      </FormControl>
    </form>
  );
}

When the buttons of the form are clicked, the "handleSubmit" method is triggered and the validation starts. I want to understand if such a validation is really appropriate? Because it checks "if the value is not equal to 'worst' then display 'Sorry, wrong answer!'"

But the whole question is that I can have many values, for example "best, worst, color, dog, animal" and so on, and that each value will have to be manually checked inside the method? I decided to use this approach (my code is slightly different, but the essence does not change)

export default function TaskIntroduction() {

const [task, setTask] = useState([
        {
            key: "1",
            answer: "You can override the style of the component thanks to one of these customization points."
        },
        {
            key: "2",
            answer: "If that's not sufficient, you can check the implementation of the component for more detail."
        },
        {
            key: "3",
            answer: "Any other props supplied will be provided to the root element (native element)."
        }
    ]
);

const [value, setValue] = React.useState('');
const [error, setError] = React.useState(false);
const [helperText, setHelperText] = React.useState('Choose wisely');

const handleRadioChange = (event) => {
    setValue(event.target.value);
    setHelperText(' ');
    setError(false);
};

const handleSubmit = (event) => {
    event.preventDefault();

    if (value === '1') {
        setHelperText('You got it!');
        setError(false);
    } else if (value !== '1') {
        setHelperText('Sorry, wrong answer!');
        setError(true);
    } else {
        setHelperText('Please select an option.');
        setError(true);
    }
};

    const answerList = task.map((i, index) => {
            return (
               <RadioGroup aria-label="quiz" name="quiz" value={value} onChange={handleRadioChange}>
                   <FormControlLabel value={i.key} control={<Radio />} label={i.answer} />
               </RadioGroup>
            );
        }
    )


return (
        <Box>
            <form onSubmit={handleSubmit}>
                <FormControl component="fieldset" error={error}>
                    <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
                    {answerList}
                    <FormHelperText color={'succeeded'}>{helperText}</FormHelperText>
                    <Button type="submit" variant="outlined" color="primary">Check Answer</Button>
                </FormControl>
            </form>
        </Box>
);

}

My code here is a little different, I store the value and text inside the object, but please pay attention to the logic of May, the logic is slightly different, but the problem here is that if the user does not select any item, but simply clicks on the button, it will work for me 'Sorry, wrong answer!' instead of 'Please select an option.' how to check that the user did not select any option, but just clicked on the button?