Issue using a combo-box with react

Question

In a Next.JS/React web app I am using a combo-box, which I created using the react-widgets library.

Below is the code for my combo-component.

....
import Combobox from "react-widgets/Combobox";
....

function MySelector({chFn}:{chFn:(v:string)=>(void)}) {
  let geoAreas = [
    { id: 'red', name: 'rouge-rot-rojo'},
    { id: 'green', name: 'vert-grün-verde'},
    { id: 'blue', name: 'bleu-blau-azul'},
    { id: 'yellow', name: 'jaune-gelb-amarillo'},
  ];

  return (
    <Combobox
      readOnly
      data={geoAreas}
      dataKey='id'
      textField='name'
      defaultValue={'red'}
      onChange={v => chFn(v)}
    />
  )
} /* End of MySelector */

Though it looks the way I want, the component above has an issue with the "onChange". I get this error (in VSCode):

Argument of type 'string | { id: string; name: string; }' is not assignable
to parameter of type 'string'.
  Type '{ id: string; name: string; }' is not assignable to type 'string'.ts(2345)
(parameter) v: string | {
    id: string;
    name: string;
}

I tried to use something like:

      onChange={v => chFn(v.id)}

But it does not work.

I assume something is wrong with the line "onChange=...", but what is the way I should write it?

The following is the code on the calling side, probably not so important for the question.

const [areaKey,setAreaKey] = useState('red');
...
<MySelector chFn={setAreaKey}/>