Axios making request to different url

heyy guys, I'm new here hope everyones doing well, currently i'm working on an e-commerce website stack: Django + DRF for backend and react/redux for front, I stumbled into a problem, axios is making request to fetch data to a wrong url. if you look at App.js below you would see that second route which renders ProductPage component is "/product/:id"

function App() {
  return (
    <Router>
      <>
        <main style={{ height: '90vh' }}>
          <Header />
          <Routes>
            <Route path="/" element={<HomePage />} exact />
            <Route path="/product/:id" element={<ProductPage />} />
          </Routes>
        </main>
        <Footer />
      </>
    </Router>
  );
}

I've also implemented redux, my action looks like this:

export const listProductDetails = (id) => async dispatch => {
    try {
      dispatch({ type: PRODUCT_DETAILS_REQUEST });
  
      const { data } = await axios.get(`api/products/${id}`);
  
      dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data });
    } catch (error) {
      dispatch({
        type: PRODUCT_DETAILS_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message,
      });
    }
  };

please look at the url axios is making request to. I also have a proxy in my package.json file:

{
  "name": "frontend",
  "proxy": "http://127.0.0.1:8000",

so axios should be making request to "/api/products/2" for example but for some reason the request is made to "product/api/products/2"

any feedback at all would be much appreciated. thanks guys