event.target is undefined pour React

Bonjour à tous je débute dans React depuis un mois. Avec un composent qui utilise un input traditionnel React je n'ai pas de soucis. Voici mon composent

import { useId } from "react";

const style = {
inputGroup: {
display: 'flex',
flexDirection: 'column',
marginBottom: '1rem',
width: '100%'
},
input: {
padding: '.5rem .8rem',
borderRadius: 10,
border: 'none',
width: '100%'
}
}

function TextField({ placeholder, value, onChange, error, name }) {

const id = useId();

const handleChange = (event) => {
    onChange(event.target.value);
}

return (

        <input style={ style.input } type="text" id={id} placeholder={ placeholder } value={ value } onChange={ handleChange } />

);

}

export default TextField;

Mais je voudrait utiliser un input autocomplate réalisé avec turnstone mais j'ai l'erreur suivante:
Unhandled Runtime Error

TypeError: event.target is undefined

const handleChange = (event) => {> 33 | onChange(event.target.value); | ^ 34 | }

Donc je ne sait pas ce qui correspond à event.target pour turnstone.

Voici le composant qui pose soucis

import { useId } from "react";
import React from 'react'
import Turnstone from 'turnstone'

const styles = {
input: 'w-full h-12 border border-oldsilver-200 pl-10 pr-7 text-xl outline-none rounded',
query: 'text-oldsilver-800 placeholder-oldsilver-400',
typeahead: 'text-crystal-500 border-white',
cancelButton: absolute w-10 h-12 inset-y-0 left-0 items-center justify-center z-10 text-crystal-600 inline-flex sm:hidden,
clearButton: 'absolute inset-y-0 right-0 w-8 inline-flex items-center justify-center text-crystal-500 hover:text-hotpink-300',
listbox: 'w-full bg-white sm:border sm:border-crystal-500 sm:rounded text-left sm:mt-2 p-2 sm:drop-shadow-xl',
groupHeading: 'cursor-default mt-2 mb-0.5 px-1.5 uppercase text-sm text-hotpink-300',
item: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700',
highlightedItem: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700 rounded bg-crystal-100',
match: 'font-semibold',
noItems: 'cursor-default text-center my-20'
}

// Set up listbox contents.
const listbox = {
displayField: 'name',
data: (query) =>
fetch(https://localhost:8000/livesearch?query=${encodeURIComponent(query)}&limit=10)
.then(res => res.json())
}

function LiveSearch({ placeholder, value, onChange, error, name }) {

const id = useId();

const handleChange = (event) => {
    onChange(event.target.value);
}

return (
    <Turnstone id={id} listbox={listbox} styles={styles} typeahead={false}  value={ value } onChange={ handleChange } placeholder="Enter a city or airport"/>
);

}

export default LiveSearch;

J'ai aussi un input datepiker qui génère la mémé erreur:

import React, { useState } from "react";
import { DatePicker } from "react-rainbow-components";

export default function RainbowDatepicker(onChange) {
const [date, setDate] = useState(null);

const handleChange = (event) => {
    onChange(event.target.value);
}

return (
<DatePicker
id="datePicker-1"
value={date}
selectionType="range"
onChange={handleChange}
formatStyle="large"
borderRadius="square"
/>
);
}

Cordialement