I have this code in 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>

I get the data array output in the console as expected but for the items I get an empty array. What is the problem and how do I solve it? I want to use hooks and jQuery for that.