(React) Setting a default value for a dropdown list based on the global state

Question

I have a landing page and a search page. The landing page has radio buttons that change the global state of boolean values. The idea is when I hit the search button on the landing, the app will take me to the search page with a dropdown list. I want the dropdown list's default value to be what was selected back on the landing page

  function getServiceDropdown(){
if (props.houseSitting) {
  return "isHome"
} else if (props.dropInVisits) {
  return "isVisit"
}

<select defaultValue={getServiceDropdown}>
  <option>Boarding</option>
  <option value="isHome">Home Sitting</option>
  <option value="isVisit">Drop-in Visits</option>
  <option>Day Care</option>
  <option>Dog Walking</option>
</select>

Answer 1

State Block is heere for class componnent

    this.state = {
        bloodTypes: [
            { value: "Seçiniz", name: "Choose" },
            { value: "0 RH -", name: "0 RH -" },
            { value: "0 RH +", name: "0 RH +" },
            { value: "A RH -", name: "A RH -" },
            { value: "A RH +", name: "A RH +" },
            { value: "B RH -", name: "B RH -" },
            { value: "B RH +", name: "B RH +" },
            { value: "AB RH -", name: "AB RH -" },
            { value: "AB RH +", name: "AB RH +" },
        ],

On Change function is heere for class componnent

onChangeData = (type, event) => {

    const stateData = this.state;
    if (event === "" || event === "Choose")
        stateData[type] = undefined
    else
        stateData[type] = event

    this.setState({ stateData });
}

Select option component is heere for class componnent

   <select value={this.state.bloodType} onChange={e => 
         this.onChangeData("bloodType", e.target.value)}>
        {this.state.bloodTypes.map((type, index) =>
            <option 
                key={index} 
                value={type.value}>{type.name}</option>
        )
    } 
    </select>

....... ......