useLoaderdata gives error ‘useLoaderData must be used within a data router’ in react

I am trying to load API from the routes using loader, params, and useLoaderData hook.

I used loader params in my existing routing structure and useLoaderData hook in my component but it didn’t work.
I checked other questions, but they primarily work on single component routing structure, but for me routing for all components are already done. How can I modify my router accordingly?

<BrowserRouter>
  <Header />
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/about' element={<About />} />
    <Route path='/services' element={<Services />} >
      <Route element={<WebServices />} index />
      <Route path='web' element={<WebServices />} />
      <Route path='app' element={<AppServices />} />
      <Route path='cloud' element={<CloudServices />} />
    </Route>
    <Route path='/blog' element={<Blog />} loader={fetchPosts} />
    <Route path='*' element={<Page404 />} />
  </Routes>
</BrowserRouter>

function Blog(props) {
  const list = useLoaderData();

  return (
    <div className='blog-container'>
      <div className='container'>
        <h1>Your Blog comes here</h1>
      </div>
      <div className='blog-post-container'>
        {list && list.length > 0
          ? list.map((item, index) => {
            return (
              <div className='blog-card'></div>
            )
          }) : <p>No post found</p>
        }
      </div>
    </div>
  )
}