I have two buttons in my code, each trying a different way for redirecting, in one of them i'm trying to use <a>, and the other one I'm trying to use route, but none of them seem to work.

Here's my code:

Component DefineDestino.js:

import React, {useState} from "react"
import { Link, BrowserRouter, Routes, Route } from "react-router-dom"
import CheckOut from "../CheckOut"

export default function DefineDestino(props) {
    const [initialValue, setValue] = useState(0)

    const increment = () => {
        return {
            type:'counter/increment'
        }
    }

    function estadosReducer(state, action) {
        if (state === 'Rio de Janeiro' && action.type === 'counter/increment') {
            setValue(initialValue + 1000)
        }
    }

    return(
        <div>
            <h1>Valor: {initialValue}</h1>
            <button onClick={() => estadosReducer(props.data, increment())}>Efetuar Compra</button>
        </div>
    )
}

App.js:

import Origem from './components/Origem';
import Destino from './components/Destino'
import './styles/App.css';
import React, {useState} from "react"
import EstadosOrigem from './components/Origem';
import EstadosDestino from './components/Destino';
import DefineDestino from './components/DefineDestino';
import { Link, BrowserRouter as Router, Routes, Route, Switch } from "react-router-dom";
import CheckOut from './CheckOut';

function App() {
  return (
    <Router>
      <div className="App">
        <div className="mainContent">
          <h1>Escolha um destino.</h1>
            < EstadosOrigem ></EstadosOrigem>
            < EstadosDestino ></EstadosDestino>
            <Routes>
              <Route path="/CheckOut" component={CheckOut}></Route>
            </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

The page I'm trying to redirect to CheckOut.js:

function CheckOut() {
  return (
    <div className="CheckOut">
      <div className="mainContent">
        <h1>TESTE.</h1>
      </div>
    </div>
  );
}

export default CheckOut;