I want to get the value of the selected option and display it next by:

import { signal } from "@preact/signals";

const pet = signal(undefined)
function Pets() {
  return (
    <>
      <select value={pet.value} onChange={e => pet.value = e.target.value} >
        <option selected value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </select>
      {pet.value} 
    </>
  );
}

render(<Pets />, document.getElementById("app"));

It works, but the default selected option isn’t got initially. As the options are generated, I cannot specify the default value of the signal.
I’m using Fresh/Preact. Playground