React's public folder and a static site

I have a small react app that contains a blog folder inside the public folder. This blog folder contains a static site built with Jekyll. A link to this blog is present in the react app. These are my routes in the react’s App.js:

         <Switch>
            <Route exact path="/quotes">
              <QuotesCategories data={data} quotes={quotes} />
            </Route>
            <Route exact path="/quotes/:categoryId">
              <PageSlider data={data} quotes={quotes} isAllQuotesPage={true} />
            </Route>

            <Route exact path="/:id/:name/:sectionindex/:sectionname/">
              <PageSlider data={data} quotes={quotes} />
            </Route>
            <Route exact path="/:id/:name">
              <SaintPage data={data} />
            </Route>
            <Route exact path="/" >
              <Home data={data} quotes={quotes} />
            </Route>

         </Switch>     

When I click on the blog link (url: “/blog/index.html”) in the react app, it works fine. But when I click on any blog posts (example url: /blog/My-Life-Journey) on the blog page, it takes back to the react app and shows a blank page. Where am I doing wrong? I was expecting that when I click on a blog post, it will try to match with the react routes but it won’t find any matching route so it will check the public folder.

Please note: The configuration works fine on my local but not on netlify