How to autopopulate a SurveyJS radio button based on custom external logic

Question

Please could someone show me how to autopopulate a radio button based on some custom logic.

I have this radiobutton:

{
            type: 'radiogroup',
            name: 'question5',
            title: 'Have you registered your commitment to setting science based targets with SBTi?',
            choices: [
              {
                value: 'Item 1',
                text: 'Yes'
              },
              {
                value: 'Item 2',
                text: 'No'
              }
            ]
          },

I am trying to make it be auto selected to yes based on information provided in an external data source called jsonData by using the useEffect function but this isn't displaying correctly. Here is my JS code:

useEffect(() => {
    if (buttonClicked) {
      const companyData = jsonData.find(company => company["Company Name"] === 'Rolls Limited');
      if (companyData && companyData['Near term - Target Status'] === 'Committed') {

        // Update the value for question5 to "Yes"
        const question = surveyModel.getQuestionByName('question5');

        question.value = 'Item 1'; // Set value to "Yes"

        setSurveyData({ ...surveyData, question5: 'Item 1' }); // Trying to update the React state - not displaying in browser correctly 

      }
      setButtonClicked(false); // Reset the flag
    }
  }, [buttonClicked, companyName, surveyData, surveyModel]);

And here is the survey js component html code:

<div style={{ width: '50%', marginRight: '5%' }}>
        <h1>Supply Chain Questionnaire</h1>
        <Survey.Survey
          model={surveyModel}
          data={{ question1: companyName, question4: companyNumber }}
        />
      </div>

The snippet I provided above doesn't display in the frontend. Please let me know if you have any questions.