When I click the link (react-router used) it takes me to the middle of the linked page instead of top (More explanation in description)

So basically when i click on the learn more button of example the SEO service , It opens the SEO page successfully however, it opens it in the middle instead of from the beginning.

Below is my app.js where I have my routes

import {BrowserRouter as Router , Routes, Route} from 'react-router-dom'

function App() {
  return (
    <>
      <Router>
        <Routes>
            <Route path="/" exact element={<HomePage/>} />
            <Route path="/whowehelp" exact element={<WhoWeHelp/>} />
            <Route path="/about" exact element={<AboutPage />} />
            <Route path= "/services" exact element= {<ServiceGeneralPage />} />
            <Route path="/caseStudy" exact element={<CaseStudyPage />} />
            <Route path="/contact" exact element={<ContactUs />} />
            <Route path="/seo" exact element={<SEO />} />
            <Route path="/facebook" exact element= {<Facebook />} />
            <Route path="/website" exact element= {<Website />} />
            <Route path="/googleads" exact element={<GoogleAds />} />
            <Route path="/content" exact element={<Content />} />
        </Routes>
      </Router>
      </>
  );
}

The code below is an example of what my SEO.js looks like

const SEO = () => {
  return (
    <>
        <SocialsHeader />
        <Navbar />

        <WhoWeHelpBanner
          title= "SEO"
          img= {seoServiceBanner}
          desc= {<p>Search engine optimization serves to help your website <br />
           rank organically through on-page and backend website <br />
            optimizations.</p>}
            
        />

        <div className={styles.gridContainer}>
            <SEOLeft 
            title= "Get on Google’s 1st Page"
            desc= "Leveraging your unique benefits and standing out among your competitors matters the most for your business ranking. We offer highly professional SEO services to achieve this goal. Our SEO specialists spend hours every month continuously optimizing your main web pages, blog posts, listings profiles, and more. SEO is a constant effort to keep up with Google's ever-changing algorithms."
            />

            <SEORight 
            img= {seoPic} 
            />

            <SEORight 
            img= {seoPic2}
            />

            <SEOLeft 
            title= "Top Rankings"
            desc= "A key part of SEO services is helping your business rank higher. There are a number of factors that go into this including keyword usage, page load times, current website traffic, web design layout, content relevancy, and much more. Our SEO experts specialize in everything it takes to help you rank higher until you're number one."
            />

            <SEOLeft 
            title= "Keyword Ranking Reporting"
            desc= "We perform extensive keyword research and find out the best ones that symbolize your business and match with what the customers are using on their daily web searches. Stay in-the-know with all the industry-specific keywords that are being tracked on your campaign."
            />

            <SEORight 
            img= {seoPic3}
            />

            <SEORight 
            img= {seoPic4}
            />

            <SEOLeft 
            title= "Imperative KPIs"
            desc= "Set your goals and objectives to gear toward snowballing the value of your company. While tracking the Key Performance Indicators (KPIs), your company will be able to make adjustments to various strategies and budgets."
            />
        </div>
    </>
  )
}

)
}`

I am kind of a beginner to this so solving this glitch on my own is pretty hard, thanks in advance !

I was expecting the page to load from the top but for some reason It loads at the bottom , could this have to do with the React Router bugging or something.