[Type Script] React-router-dom 사용 router설정시 에러

React-router-dom을 세팅하는 과정에서 src/shared/Router.ts 부분에서 다음과 같은 에러가 발생했다.

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';

const Router: React.FC = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={<Home />}
        />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

에러

에러는 <BrowserRouter>부터 </BrowserRouter>까지 발생한다.
에러메시지

'Routes' refers to a value, but is being used as a type here. Did you mean 'typeof Routes'?ts(2749)

해결

여러가지 시도해보고 계속 안 되다가 어이없게 해결했다.
바로 확장자를 .tsx로 바꾼 것이다.

Router.ts -> Router.tsx