Почему не устанавливает значение в массиве useState

Question

Я пытаюсь установить состояние программ после получения данных с сервера. Это не работает. Я не нахожу никаких проблем. Объясните, пожалуйста, в чем проблема.

const [programs, setPrograms] = useState([]);


useEffect(() => {
    fetchData();
}, []);

 const fetchData = async () => {
     const { data } = await Axios.get("/programs");
     if (data.programs) {
         data.programs.forEach(item => {
             setPrograms([
                 ...programs,
                 {
                     title: item.snippet.title
                 }
             ]);
         });
         console.log(programs);
     }
 };