عند تغيير ال state باستخدام setState التغيير لا يكون لحظي

أحاول تعلم الخطافات وقد جعلتني طريقة useState في حيرة من أمري. أقوم بتعيين قيمة أولية لحالة في شكل مصفوفة. طريقة التعيين في useState لا تعمل معي حتى مع انتشار (...) أو بدون عامل انتشار. لقد قمت بإنشاء api أقوم بالاتصال به وجلب البيانات التي أريد تعيينها في الحالة.

import React, { useState, useEffect } from 'react';

export default function Movies() {
  const initialValue = [
    {
      category: '',
      photo: '',
      description: '',
      id: 0,
      name: '',
      rating: 0,
    },
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function () {
      try {
        // const response = await fetch("http://localhost:5000/movies");
        // const json = await response.json();
        // const result = json.data.result;
        const result = [
          {
            category: 'cat1',
            description: 'desc1',
            id: '1546514491119',
            name: 'randomname2',
            photo: null,
            rating: '3',
          },
          {
            category: 'cat2',
            description: 'desc1',
            id: '1546837819818',
            name: 'randomname1',
            rating: '5',
          },
        ];
        console.log('result =', result);
        setMovies(result);
        console.log('movies =', movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return (
    <div>
      {movies.map((movie) => (
        <p>{movie.name}</p>
      ))}
    </div>
  );
}