First solution

You could simply leave Newsletter component where it's inside BrowserRouter and change its content as below. Using useLocation either it renders its content or return an empty JSX depending on the path.

import { useLocation } from "react-router-dom";
const Newsletter = () => {
  // ...
  const { pathname } = useLocation();
  // ...
  if (pathname === "/login" || pathname === "/register") {
    return <></>;
  }
  // render actual content
  return <div></div>;
};
export default Newsletter;

Second one

Another way is to control everything in one place by creating a Layout.js commponent, like so:

import { Outlet, useLocation } from "react-router-dom";

const Layout = () => {
  const { pathname } = useLocation();
  return (
    <>
      <Announcement />
      <Navbar />
      <Outlet />
      {pathname !== "/login" && pathname !== "/register" && <Newsletter />}
    </>
  );
};

export default Layout;

Then change your routes set up as below. Notice the Layout component. Make sure to import it:

<BrowserRouter>
  <Wrapper>
    <Routes>
     <Route element={<Layout />}>
      <Route index path="/" element={<Home />}></Route>
      <Route path="/products" element={<ProductList />}></Route>
      <Route path="/products/:category" element={<ProductList category="true" />}></Route>
      <Route path="/product/:id" element={<Product />}></Route>
      <Route path="/register" element={isAuthenticated ? <Navigate replace to="/" /> : <Register />}></Route>
      <Route path="/login" element={isAuthenticated ? <Navigate replace to="/" /> : <Login />}></Route>
      <Route path="/account" element={isAuthenticated ? <Navigate replace to="/" /> : <Account />}></Route>
      <Route path="/forgot-password" element={isAuthenticated ? <Navigate replace to="/" /> : <ForgotPassword />}></Route>
      <Route path="/cart" element={<Cart />}></Route>
      <Route path="/wishlist" element={<Wishlist />}></Route>
      <Route path="/orders/tracking" element={<Tracking />}></Route>
      <Route path="/orders/checkout" element={<Checkout />}></Route>
     <Route>
    </Routes>
  </Wrapper>
  <Footer />
</BrowserRouter>

May be you are looking for this :

window.location.pathname

Maybe try with nested route by using Outlet in Newsletter component

<BrowserRouter>
 <Wrapper>
   <Announcement />
   <Navbar />
   <Routes >
       <Route exact path="/" element={<Newsletter />} >
           <Route index element={<Home />}></Route>
           <Route path="products" element={<ProductList />}></Route>
           <Route path="products/:category" element={<ProductList category="true" />}></Route>
           <Route path="product/:id" element={<Product />}></Route>
           <Route path="register" element={isAuthenticated ? <Navigate replace to="/" /> : <Register />}></Route>
           <Route path="login" element={isAuthenticated ? <Navigate replace to="/" /> : <Login />}></Route>
           <Route path="account" element={isAuthenticated ? <Navigate replace to="/" /> : <Account />}></Route>
           <Route path="forgot-password" element={isAuthenticated ? <Navigate replace to="/" /> : <ForgotPassword />}></Route>
           <Route path="cart" element={<Cart />}></Route>
           <Route path="wishlist" element={<Wishlist />}></Route>
           <Route path="orders/tracking" element={<Tracking />}></Route>
           <Route path="orders/checkout" element={<Checkout />}></Route>
       </Route>
   </Routes>
 </Wrapper>
 <Footer />
</BrowserRouter>

and in Newsletter component

const Newsletter = () => {
    ... your conditions 

    return (
        <Outlet /> 
        ... newsletter content
    )
}