Как получить доступ к реквизиту из хука useEffect в Reactjs

Я извлекаю данные из новостного API и сохраняю их в своем состоянии после завершения, а затем также передаю значение состояния в качестве реквизита дочернему компоненту.

Данные, возвращаемые API, представляют собой массив объектов. Я хочу передать только один элемент (объект) этого массива (который сейчас находится в моем состоянии) моему дочернему компоненту. Итак, я сделал именно это, используя обычный метод обхода массивов ([]) для передачи одного элемента, но, к сожалению, когда я попытался использовать хук useEffect в моем дочернем компоненте для консоли, журналировать реквизиты (что сработало), я не смог получить доступ к свойствам моего элемента (объекта) ни из хука, ни из тела компонента, поскольку он продолжал говорить мне, что он не определен и что я должен отменить все подписки и асинхронные задачи в функции очистки useEffect. Итак, я попытался передать этот элемент в виде массива с помощью метода splice, чтобы его можно было пройти из дочернего компонента с помощью метода map (который сработал), однако я все еще не смог получить доступ к свойствам из хука useEffect.

Родительский компонент (Home.js)

 ...
const [data, setData]= useState([])
 useEffect(()=>{

        const fetch= async()=>{
            const response= await axios(url)
            const results= response.data
            setData(results.articles.slice(0,5))
        }
        fetch()

    },[url])

return(
    <>
    <Categories onClick = {fetchCategory}/>
    <section className = {classes.latest}>
    <Vertical postArray = {data.slice(0,1)} postObject = {data[0]}/>
    </section>
    </>
)
}

export default Home

Дочерний компонент (Vertical.js)

const Vertical=(props)=>{

useEffect(() => {
    // console.info('postArray',props.postArray.title)
    console.info('postObject',props.postObject.title)

}, )

return(
    <>
    {/* <article key = {props.postObject.content} className = {classes.article}>
        <figure className = {classes.article_figure}>
            <img src='' alt = "article alternative"/>
        </figure>
        <div className = {classes.article_details}>
            <h2>{props.postObject.title}</h2>
            <p>{props.postObject.description}</p>

        </div>
    </article> */}
    {props.postArray.map(post=>(
        <article key = {post.content} className = {classes.article}>
        <figure className = {classes.article_figure}>
            <img src='' alt = "article alternative"/>
        </figure>
        <div className = {classes.article_details}>
            <h2>{post.title}</h2>
            <p>{post.description}</p>

        </div>
    </article>
    ))}
    </>
)
}

export default Vertical

Причина этого в том, что мне нужно получить доступ к URL-адресу, который находится внутри переданного объекта, чтобы сделать другой для получения миниатюры для этого сообщения.