라우터 오류

주소창에 /detail을 치면 Detail 컴포넌트로 화면이 넘어가야 하는데 그러지 않습니다. 
왜 그런건지 알려주시면 감사하겠습니다.

//App.js
import {BrouserRouter} from 'react-router-dom';
import {Routes, Route, Link} from 'react-router-dom';
import Detail from './Detail';

function App() {
  return (
    <div className="App">
        <Routes>
          <Route path="/" element={<div>메인페이지</div>}/>
          <Route path="/detail" element={<Detail />}/>
        </Routes>
    </div>
   );
  }
export default App;

//Detail.js
function Detail () {
    <div className="container">
    <div className="row">
        <div className="col-md-6">
        < img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
        <h4 className="pt-5">상품명</h4>
        <p>상품설명</p>
        <p>120000원</p>
        <button className="btn btn-danger">주문하기</button>
        </div>
    </div>
    </div>
}
export default Detail;