proxy is not setting up in react - reactjs

Question

I have setup proxy in react package.json but the request is being sent to client-server instead of backed API I am using axios to consume API
my package.json
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8000/api"
}
sample request
useEffect(() => {
const fetchPost = async () => {
const response = await axios.get(
"posts/timeline"
);
};
fetchPost();
}, []);
the request URL in the network tab is http://localhost:3000/posts/timeline
if anyone has fixes please suggest them.