Issue with react-router-dom (Route in Routes)

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        {/* DOCS */}
        <div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
         <Routes>
          <Route path="docs/" element={<DocsHomePage />} />
          <Route path="docs/developer" element={<DocsDeveloperPage />} />
          <Route path="docs/customer" element={<DocsCustomerPage />} />
          <Route path="docs/customer/how-to-install-metamask" element={<HowInstallMetamask />} />
        </Routes>
        </div>

  <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/payment" element={<PaymentStatusPage />} />
          <Route path="/*" element={<Error404 />} />
        </Routes>
        {/* DOCS */}
        <div className="max-[1800px]:w-[80vw] max-w-[1440px] w-[100vw] py-12 mx-auto">
         <Routes>
          <Route path="docs/" element={<DocsHomePage />} />
          <Route path="docs/developer" element={<DocsDeveloperPage />} />
          <Route path="docs/customer" element={<DocsCustomerPage />} />
          <Route path="docs/customer/how-to-install-metamask" element={<HowInstallMetamask />} />
        </Routes>
        </div>