Tengo este código en JSX:

 <script type="text/babel"> function Rows(){ const [isLoaded, setIsLoaded] = React.useState(false); const [items, setItems] = React.useState([]); React.useEffect(()=>{ $.ajax( { url:"http://localhost:8080/api/manage/products/all", success:function(data){ setItems(data); console.log(data); console.log(items); setIsLoaded(true); } }); },[]); return( <React.Fragment> {items.map((o)=>{ <tr> <th scope="row">{o.id}</th> <td>{o.prdname}</td> </tr> })} </React.Fragment> ); } ReactDOM.render(<Rows />,document.getElementById("clientBody")); </script>

Obtengo la salida de la matriz de data en la consola como se esperaba, pero para los items obtengo una matriz vacía. ¿Cuál es el problema y cómo lo soluciono? Quiero usar ganchos y jQuery para eso.