AxiosとBearerトークンを用いた post通信。トークンの設定方法

Question

typescript&reactで家計簿のようなアプリを製作中です。
新しい支出をBearer tokenを用いてauthorizationを行いデータベースに登録をしたいです。

発生している問題・エラーメッセージ

うまくtokenを設定することができずサーバーからUnauthorizedが帰ってきてしまします。

AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message
: 
"Request failed with status code 401"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 401, statusText: 'Unauthorized', headers: {…}, config: {…}, …}
[[Prototype]]
: 
Error

該当のソースコード

	try{
		const data = await appApi.post('/transaction/save', {
			headers: {"Authorization": `Bearer ${token.access!}`},
			content
		}
		)
		console.log(data.data)
	} catch(err) {
		console.log(err)
	}

postmanで動作確認を行った場合は期待通りの動きをしており、上のコードでcontentはpostmanで動作した時のbodyに入っているオブジェクトがそのまま入ります。

また他の通信では以下のようなコードで正常に作動しました。

		const dataExpense = await appApi.get('/category/Expense', {
			headers: {"Authorization": `Bearer ${token.access!}`}
		})

試したこと

googleの検証ツールのnetworkの詳細が以下のようになっており、なぜかトークンが設定されていないことがわかりました。

よろしくお願いします