React + Viteプロジェクト(TypeScript)でmswのモックを実行する時に、http.getのメソッド内に入ってくれない

Question

実現したいこと

React + Viteプロジェクト(TypeScript)でmswのモックを実行する時に、http.getのメソッド内に入ってくれなくて困っています。

試したこと

公式ドキュメントを参考にコードを準備しました。
https://mswjs.io/docs/best-practices/typescript

Reactを起動して実行しているブラウザの別タブで下記のURLを実行して、GETアクセスを試したが、mswのhandler.tsは実行されるが、メソッド内に入ってくれなく、うまくいかない
http://localhost:5173/api/persons

準備したファイル

public/mockServiceWorker.js　※npx msw init public/ --save　で自動生成したもの
src/mocks/browser.ts　※新規作成
src/mocks/handlers.ts　※新規作成
src/main.ts　※browser.tsを実行するコードを追記

ソース

// handler.ts
import { http, HttpHandler, HttpResponse } from 'msw'

type Person = {
  personCode: string
  personName: string
  age: string
}

type ParamsType = {
  personCode: string
}

type RequestBodyType = {
  person: Person
}

type ResponseBodyType = {
  persons: Person[]
}

export const handlers: HttpHandler[] = [
  http.get<ParamsType, RequestBodyType, ResponseBodyType, '/api/persons'>(
    '/api/persons',
    ({ params }) => {
      // dummy
      console.log(params)
    }
  )
]

// browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

// main.ts 　のReactDomの前に追記

if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('@/mocks/browser')
  worker.start()
}

パッケージバージョン

dependencies
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"

devDependencies
"msw": "^2.3.1",
"typescript": "^5.2.2",
"vite": "^5.2.0"

Answer 1

解決しました。
ReactでMSWはURLからのGETアクセス確認はできなく、axios等で実行する必要がありました。
実行することができました。