React: Insert GUID in URL by selecting Radiobutton

Question

I want to create a function that takes a value from radiobuttons and updates the url with a guid + a segment id

Imagine we have 3 radiobuttons with the value of {apple, pear, coffee}. The fruits have a fruit guid and coffee does not.

By clicking one of these options will generate something like the following url in React:

apple: http://xxxxxxx?c=e93a85f2-57ab-4935-bff1-9a3f7e3dfa82&fruit=c09a11c3-e373-45f3-a7e4-389dab3fdcc2

pear: http://xxxxxxx?c=e93a85f2-57ab-4935-bff1-9a3f7e3dfa82&fruit=448d0b2d-9081-4eec-9098-af9deed64ce5

coffee: http://xxxxxxx?c=e93a85f2-57ab-4935-bff1-9a3f7e3dfa82

So far i have some bootstrap html and the saved the state:

let [productSelected, setProductSelected] = useState("Apples");


<div className="btn-group-container">
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => setProductSelected("Apples")}
          active={productSelected === "Apples"}
          id="selector-btn"
        >
          <span>
            <h5>Apples</h5>
          </span>
        </Button>
        <Button
          color="primary"
          
          onClick={() => setProductSelected("Pears")}
          active={productSelected === "Pears"}
          id="selector-btn"
        >
          <span>
            <h5>Pears</h5>
          </span>
        </Button>
        <Button
          color="primary"
          onClick={() => setProductSelected("Coffee")}
          active={productSelected === "Coffee"}
          id="selector-btn"
        >
          <span>
            <h5>Coffee</h5>
          </span>
        </Button>
      </ButtonGroup>
      <p>Selected: {productSelected}</p>
    </div>

Hope you can help! thanks for reading so far!