axios api calls pointing towards my localhost in nextjs application it is workign fine on serverside

i am using axios library in my nextjs and react application i am able to call the api from the server using getStaticProps() it renders the intial data properly but when i am making call from client(browser) side to append more data to my list it is hitting wrong URL it is pointing to my server (localhost) instead of the API server

I have made axios interceptor in my server for base URL config and additional headers

when I am making request via axios from serverside the API end point is https://example-api/vi/userlist but when I am making it from the client side via same interceptor config the API endpoint is like localhost:3000/userlist

below is my azios instance

let instance = axios.create({
     baseURL: https://smaple-api/v1,
     headers: {
     "Appapi-Id":"h4er9jdt33i6_8r37mg"
     }
  })

My api.js file from where I have done reference of the api

const feedsApi = { 
     userFeeds : (apiUrl,data) => {
     return http.post(apiUrl,data)
}

export default feedsApi;