Redirection vers un site Web externe dans React

Je rencontre un problème pour créer un lien vers une page externe dans React.

Mon application utilise react-router-dom et j'ai mon App.js comme ceci:

<ul className="booking-sites p-0">
  {accommodations && accommodation.bookings.map((booking, index) => {
    return (
      <li key={index} className="booking-method">
        <a href={booking.link} className="booking-link">
          <img
            src={booking.logo}
            alt={`booking method ${index}`}
            className="booking-icon"
          />
        </a>
      </li>
    );
  })}
</ul>

Dans ma page d' AccommodationPage j'ai un lien vers une page externe

function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <div className="App my-content">
          <Router>
            <Header />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/accommodations" component={Accommodations} />
              <Route exact path="/rentals" component={RentalServices} />
              <Route exact path="/tours" component={DailyTours} />
              <Route exact path="/contacts" component={ContactUs} />
              <Route
                exact
                path="/editaccommodations"
                component={EditAccommodations}
              />
              <Route
                exact
                path="/addaccommodation"
                component={AddAccommodation}
              />
              <Route
                exact
                path="/accommodations/:id"
                component={AccommodationPage}
              />
              <Route component={NotFound} />
            </Switch>
            <Footer />
          </Router>
        </div>
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

booking.link est par exemple "www.foo.com"

Lorsque je clique sur le lien, au lieu d'ouvrir "www.foo.com", il ouvre "http: // localhost: 3000 / accommodation / www.foo.com"