Next.js（axios）とlaravelを使ってhttp通信がしたい（POST、PUT、DELETE）

Next.js Larvelを使用してSPAを開発しています。
LaravelはAPIサーバーとしてREST APIでの値受け渡しをしております。
GETでの値取得はできましたが、POST、PUT、DELETEといった処理がうまく動作しません。
Laraveはのバージョンは8.1を使用しています。
また、ログイン認証関連でsanctumを使用しました。
この辺も影響しているのかな？とも思います。
ご教授いただけますと幸いです。

Next側　

front/pages/top.js
const Axios = axios.create({
  xsrfHeaderName: 'X-CSRF-Token',
  withCredentials: true,
  headers: {
    'content-type': 'application/json'
  }
})
  await Axios
    .put('http://127.0.0.1:8000/api/test/000001', data)
     .then((res) => {
        console.log(res.data)
     })
     .finally(()=>{
       setRegister(false)
       setOpen(false)
     })

Laravel側

routes/api.php
Route::apiResource('test', TestController::class);

controllers/TestController.php
public function update(EmployeeRequest $request, $id)
    {
        // 更新
        $test = Test::find($id);
        $test->update($request->all());
        return new TestResource($test);
    }

php artisan route:list
 | PUT|PATCH | api/test/{test}   | test.update  | App\Http\Controllers\TestController@update  | api

kernel.php
'api' => [
            \App\Http\Middleware\VerifyCsrfToken::class,　⇦追加　※追加する前は419エラーが出ていた（内容：csrf token mismatch）
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, ⇦sanctum使用時に追加
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

Controllers/Auth/Logincontroller.php
 public function login(Request $request): JsonResponse
    {
        $credentials = $request->validate([
            $this->username() => 'required',
            'password' => 'required',
        ]);

        $credentials = $request->only($this->username(), 'password');

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();
            return response()->json(Auth::user());
        }

        throw new Exception('ログインに失敗しました。再度お試しください');
    }

当初のエラー

local.ERROR: Session store not set on request. {"exception":"[object] (RuntimeException(code: 0): Session store not set on request

現在のエラー（ブラウザのコンソール）

{message: "CSRF token mismatch."}
　message: "CSRF token mismatch."

記事

sanctum導入時

https://yutaro-blog.net/2021/09/07/nextjs-laravel-sanctum-spa/

419のtoken mismatch が出た時

https://stackoverflow.com/questions/58910214/react-to-laravel-csrf-token-mismatch-error-not-working-even-after-trying-lot

LoginController.php
public function login(Request $request): JsonResponse
    {
        $credentials = $request->validate([
            'id => 'required',
            'password' => 'required',
        ]);

        $credentials = $request->only('EM_FIKSID', 'password');

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();
            return response()->json(Auth::user());
        }

        throw new Exception('ログインに失敗しました。再度お試しください');
    }

pages/login.js
const handleClick = () => {
    const Data = { params: { 'id': id, 'password': password }}
    axios
      // CSRF保護の初期化
      .get('http://127.0.0.1:8000/sanctum/csrf-cookie')
      .then((res) => {
　　　　　// ログイン処理
        console.log(res)
        axios
          .post(
            'http://127.0.0.1:8000/login',
            Data,
          )
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      })
  }