javascript – In React js, how to swap a two select component values onClick?

I have two select components right & left side with different values consider A->right side & B->left side, In a button click function I need to swap a A -> select component to Left and B-> select component to right. How to achieve this in react js.

function SelectComponentA({
<select name="Country" id="Country">
  <option value="France">France</option>
  <option value="Italy">Italy</option>
)}
export SelectComponentA


function SelectComponentB({
<select name="Segment" id="Segment">
  <option value="Segment 1">Segment 1</option>
  <option value="Segment 2">Segment 2</option>
</select>

export SelectComponentB

I tried using a UseState

const [dropDownSwap, setSwap] = useState(true)

  function swapDropDownComponents() {
    setSwap(!dropDownSwap)
  }

 {dropDownSwap ? SelectComponentA : SelectComponentB}

<button type="button" Onclick={SwapSelectComponent}>Swap</button>