Не удается получить доступ к данным от всех потребителей, используя fetch () и React useContext ()

Question

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

export const BlogsContext = React.createContext()

export const BlogsProvider = (props) => {

const [data, setData] = useState({})
const [isLoading, setIsLoading] = useState(true)
const [blogId, setBlogId] = useState(-1)
const [detailData, setDetailData] = useState({})

useEffect( () => {
    async function getData(){
        try {
            setIsLoading(true)
            const fetchCall = await fetch(
                urls.BLOGS, {
                method: HTTP.GET,
                headers: REQ_BODY
            })
            const result = await fetchCall.json()
            setData(result)
            setIsLoading(false)
        } catch (error){
            console.error(error)
        }
        setIsLoading(false)
    }
    Object.keys(data).length < 1 && getData()
    detailData > -1 && setDetailData(data[blogId])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

console.log(blogId)

return (
    <BlogsContext.Provider value={[data, isLoading, blogId, setBlogId, detailData]}>
        {props.children}
    </BlogsContext.Provider>
)}
export const BlogsConsumer = BlogsContext.Consumer

Это действительно работает для этого потребителя:

xport function SingleBlog({index}) {

// eslint-disable-next-line
const [data, isLoading, blogId, setBlogId] = useContext(BlogsContext)
const [blog, setBlog] = useState(data)

useEffect(() => {
    data && data.length > 0 && setBlog(data[index])
}, [data, isLoading, index])

const relocatToPostDetail = () => {
    setBlogId(blog.id)
    return window.location.assign(`/blogs/${blog.id}`)
}

return(
    <SingleBlogContentWrapper>
        { isLoading ? <Loading /> : blog &&
            <>
                <H3>{blog.title}</H3>
                <P>Author: {blog.authors}</P>
                <Button onClick={relocatToPostDetail}>Read More</Button>
            </>
        }
    </SingleBlogContentWrapper>
)}

Это не работает для этого потребителя :

export const BlogDetail = () => {

// eslint-disable-next-line
const [data, isLoading, blogId, setBlogId] = useContext(BlogsContext)
const [blog, setBlog] = useState(data)

useEffect(() => {
    data && data.length > 0 && setBlog(data[blogId])
}, [data, isLoading, blogId])

return (
    <>
        {isLoading ? <Loading /> : blog && (
            <BlogWrapper>
                <BlogContentWrapper>
                    <H1>{ blog.title }</H1>
                    <P>Posted on: { blog.date_posted }</P>
                    <Hr primary height={1} />
                    <P>{ blog.content }</P>
                    <BlogPostFooter blog={blog} />
                </BlogContentWrapper>
            </BlogWrapper>
        )}
    </>
)}

index:

ReactDOM.render(
  <Router>
    <BlogsProvider>
      <AuthorsProvider>
        <App />
      </AuthorsProvider>
    </BlogsProvider>
  </Router>,
  document.getElementById('root')
)

Обновляет некоторые, но не все. Так что я не уверен, что проблема в извлечении части или в контексте, или в совокупности. Спасибо за ваше время! ?