proxy not always working : axios error 404 - reactjs

Question

I have a problem with my proxy. When I am in the homepage, the proxy is working but when I go to another page (using Link from react-router-dom) it's not taken into account.
I have the error: Object { message: "Request failed with status code 404", name: "AxiosError", code: "ERR_BAD_REQUEST"..}
and the http request is : http://localhost:3000/profile/posts/profile/olive
but I want it to be : http://localhost:8800/api/profile/olive
In package.json I have : "proxy": "http://localhost:8800/api/"
And here are the scripts that I use (Feed.jsx):
import "./feed.css";
import Share from "../share/Share";
import Post from "../post/Post";
import { useState, useEffect } from "react";
import axios from "axios"
export default function Feed({ username }) {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = username
? await axios.get("posts/profile/" + username)
: await axios.get("posts/timeline/629f61ef4ed27a5d39094ced");
setPosts(res.data)
};
fetchPosts();
}, []);
return (
<div className="feed">
<div className="feedWrapper">
<Share />
{posts.map((p) => (
<Post key={p._id} post={p} />
))}
</div>
</div>
)}
This is my App.js:
import {
BrowserRouter as Router,
Routes as Switch,
Route,
} from "react-router-dom";
import Homepage from "./pages/homepage/Homepage";
import Login from "./pages/login/Login"
import Register from "./pages/register/Register"
import Profile from "./pages/profile/Profile"
function App() {
return (
<>
<Router>
<Switch>
<Route exact path="/" element={<Homepage/> }/>
<Route exact path="/login" element={<Login/> }/>
<Route exact path="/register" element={<Register/> }/>
<Route path="/profile/:username" element={<Profile/> }/>
</Switch>
</Router>
</>
);
}
export default App;
This is my Profile.jsx:
import "./profile.css"
import Topbar from "../../components/topbar/Topbar";
import Sidebar from "../../components/sidebar/Sidebar";
import Feed from "../../components/feed/Feed";
import Rightbar from "../../components/rightbar/Rightbar";
export default function Profile() {
const PF=process.env.REACT_APP_PUBLIC_FOLDER;
return(
<>
<Topbar/>
<div className="profile">
<Sidebar/>
<div className="profileRight">
<div className="profileRightTop">
<div className="profileCover">
<img src={`${PF}post/3.jpeg`} alt="" className="profileCoverImage" />
<img src={`${PF}person/5.jpeg`} alt="" className="profileUserImage" />
</div>
<div className="profileInfo">
<h4 className="profileInfoName">Louise Dupuis</h4>
<span className="profileInfoDesc">Hello everyone I am a spiritual coach</span>
</div>
</div>
<div className="profileRightBottom">
<Feed username="olive"/>
<Rightbar profile/>
</div>
</div>
</div>
</>
);
}
And this is how I linked a button from the homepage to the profile page.
<Link to={`/profile/${user.username}`}>
<img className="postProfileImage" src={user.profilePicture || PF+"person/no_avatar.png"} alt="" />
</Link>
Thank you in advance for your attention and your help. I really tried and searched but I didn't find. I don't know what's wrong in my code ...