Не отрисовываются компоненты React

Не могу понять почему не отрисовываются компоненты. С сервера все приходит нормально.

const {id} = useParams()

    const [data, setData] = useState()
   
    async function fetchData() {
        try {
          const res = await databaseApi.get('api/movie/'); 
          if (res.data) {
            const filteredData = res.data.filter(item => item.category.id == id) 
            console.log(filteredData)
            if (filteredData.length > 0) { 
              setData(filteredData)
              console.log(data)
            } else {
              setData([])
            }
          } 
        } catch (error) {
            console.error('Ошибка:', error);
            setData([])
        }
      };

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

В data как будто-бы не записывается FilteredData. В консоли пишет что data undefind.

return (
        data ? data.length > 0 && 
            (
                <MoviesBlock data={data} />      
            )
        : <Loader/>
    )

Однако следующий лог приходит с данными.

export const MoviesBlock = ( {data} ) => {

    console.log(data)
    return(
        data ? data.length > 0 && <div>
            {data.map((item) => {
                <MovieBlock movie = {item}/>
            })}
        </div> : <Loader />
    )
} 

А вот последний уже нет

export const MovieBlock = ( {movie} ) => {

    console.log(movie)
    
    return (
        movie ? <div>
            <p>{movie.name}</p>
            <img src={movie.image} />
            <p>{movie.decription}</p>
            <button>Добавить в очередь</button>
        </div>
        : <></>
    )

} 

Совсем не понимаю в чем дело, помогите, пожалуйста(