I created an axios instance and I use it in api routes but i want to use it within the client component in useEffect - don't want to create a new api routes for that -
next/headers cookie has been using in axios instance but it doesn't work in client component . what should i do ?

instance.interceptors.request.use(
  async function (config) {
    const cookieStorage = await cookies();
    const token = cookieStorage.get(STATIC_KEYS.TOKEN)?.value;
    if (token) {
      config.headers['x-token'] = token;
    }

    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
);

error

Ecmascript file had an error
  1 | import axios from 'axios';
> 2 | import { cookies } from 'next/headers';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 | import { STATIC_KEYS } from '../constant';
  4 |
  5 | const options = {

You're importing a component that needs "next/headers". That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/app/building-your-application/rendering/server-components