Значение состояния не отображается

Я новичок в React.js, я создаю новое приложение, используя реагирующие хуки, я получаю данные из API и устанавливаю их состояние с помощью setProductTypes(), а затем, когда я читаю это значение productTypes.length, он не показывает значения (наблюдал это из отладчика), я отображаю данные на основе этого, и он показывает данные.

import React, { useState, useEffect } from "react";
import ProductTypeDataService from "../../services/ProductTypeService";
import Card from 'react-bootstrap/Card'
import { CardGroup } from "react-bootstrap";

const ProductTypeList = () => {

    const [productTypes, setProductTypes] = useState([]);
    const [nestedArray, setNestedArray]= useState([]);
     
    useEffect(() => {
      debugger ;
        retrieveTutorials();
      },[]);
 
    const retrieveTutorials = () => {
        ProductTypeDataService.getAll()
          .then(response => {
            setProductTypes(response.data);
            createNestedArray();;
            
          })
          .catch(e => {
            console.info(e);
          });
      };

      const createNestedArray= ()=>{

        var arr = new Array([]);

        var arrayLength = productTypes.length;
        for (var i = 0; i < arrayLength; i+4) {          
          for (var k = 0; k < 4; k++) {       
            arr[i,k] =productTypes[i+k];         
          }         
        }
        setNestedArray(arr);
        console.info(nestedArray);
      };

    return (
      <div className = "col-md-6">
        <h4>Product Type List</h4>

        <CardGroup>
          {productTypes &&
            productTypes.map((productType, index) => (
              <Card>
              <Card.Body>
              <Card.Img variant = "top" src = {productType.imageUrl} />
              </Card.Body>
              <Card.Footer>
                <small className = "text-muted">{productType.name}</small>
              </Card.Footer>
            </Card>             
            ))}
        </CardGroup>
        </div>
    )
}

export default ProductTypeList
 

🤔 А знаете ли вы, что...
React поддерживает серверный рендеринг (SSR) для улучшения SEO и производительности.