How can I call API dynamically with button and depending on what user write in the input box in another page react?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import React, { useState } from "react";
import moment from "moment";
import { Link } from "react-router-dom";

const api = {
  base: "https://api.zrexpress.fr/tracking/",
};

function App() {
  const [query, setQuery] = useState("");
  const [tracks, setTrack] = useState([]);

  const search = (evt) => {
    console.log(`${api.base}${query}`);
    fetch(`${api.base}${query}`)
      .then((res) => res.json())
      .then((result) => {
        setTrack(result);
        setQuery("");
        console.log(result);
      });
  };
  const getDate = (date) => {
    var dateStringWithTime = moment(date).format("DD-MM-YYYY HH:mm:SS");
    return dateStringWithTime;
  };

  return (
    <div className="App">
      <div className="search-box">
        <input
          type="text"
          className="search-bar"
          placeholder="Code Tracking"
          onChange={(e) => setQuery(e.target.value)}
          value={query}
          onKeyPress={search}
          name="tracking"
        ></input>
        <Link to={(location) => `${api.base}${query}`}>
          <button onClick={search}>trackez</button>
        </Link>
      </div>
      <table className="table">
        <thead>
          <th>Date</th>
          <th>Situation</th>
        </thead>
        <tbody>
          <tr>
            <td className="date">
              {tracks.map((track) => (
                <p>{getDate(track.Date)}</p>
              ))}
            </td>
            <td className="Situation">
              {tracks.map((track) => (
                <p>{track.Situation}</p>
              ))}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;