New to react, So a little confused on why this was giving me an error.

This is my main.js file

const Main = () => (
    <div>
        <Menu pointing secondary stackable>
            <Menu.Menu position='right'>
                <Menu.Item active  as={NavLink} exact to='/' name='Welcome' /> 
                <Menu.Item  as={NavLink} to='/powersection' name='power' />
            </Menu.Menu>
        </Menu>

        <Segment raised className='magentaSegment'>
            <Routes>
                <Route exact path='/' element={<HomeView />} />
                <Route path='/powersection' element={<PowerSection />} />
                {/* <Route path='*' component={NotFound} /> */}
            </Routes>
        </Segment>
    </div>
)

export default Main

This is what my App.js file looks like

function App() {
  return (
    <div id='container'>
      <div id='main'>
        <Routes>
          <Route path='/' element={ <Main />} />
        </Routes>
      </div>

      <div id='footer'>
        <Footer />
      </div>
    </div>
  );
}

export default App;

And this is my index.js file.

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

When I toggle to the Power menu item. this is the error i get index.js:44 No routes matched location "/powersection"

Anyone know how i can fix this? Thank you