To manage and modify access tokens as per your requirement, you can modify your code to dynamically update the access token for API calls, using the token received from the new case creation. Here's how you can achieve this:

1. Store the Access Token Login: After the user logs in and receives the general access token, store this token securely in the browser's local storage or a global state management tool like Redux or Recoil.

2. Use the Stored Access Token for API Requests: Modify your axiosWithAuth instance to use the stored access token from local storage or state management to make API requests initially. Additionally, you should add an Axios interceptor to dynamically add the access token from the logged-in user to all outgoing requests. This way, all API requests will use the stored access token.

3. Update Access Token After Creating a Case: Once a new case is created, the API should return a unique access token for that specific case. You can capture this token from the response and update the stored access token with this new token, enabling subsequent requests to use the updated token for that particular case.

Here's an example of how to achieve these steps:

import axios from 'axios';
import { UseQueryOptions, useMutation, useQuery } from 'react-query';
import { Case CreateCaseData, UpdateCaseData } from './dto/type';
import Cookies from 'js-cookie';

let accessToken = Cookies.get('accessToken'); // Retrieve the stored access token

const axiosWithAuth = axios.create({
  baseURL: 'http://172.16.3.200:1616/cases  headers: {
    Authorization: `Bearer ${accessToken}`,
 },
});

// Add an Axios interceptor to update the access token for all outgoing requests
axiosWithAuth.interceptors.request.use((request) => {
  const token = Cookies.get('accessToken');
  if (token) {
    request.headers.Authorization = `Bearer ${token}`;
  }
  return request;
});

// ...... (other code remains unchanged)

// Create the case and update the access token
export const useCreateCase = (caseData: CreateCaseData) => {
  return axiosWithAuth.post('http://172.16.3.200:1616/cases', caseData).then((response) => {
    const newAccessToken = response.data.accessToken; // Assuming the API returns the updated access token
    Cookies.set('accessToken', newAccessToken); // Update the stored access token with the new token
    accessToken = newAccessToken; // Update the local accessToken variable
    return response.data;
  });
};

In the example above, after creating a new case, the updated access token is retrieved from the response and then stored as the new access token for future API requests. The local accessToken variable is also updated for immediate use in subsequent requests.

to handle potential error scenarios and ensure the security of access token handling, especially when storing and updating access tokens.