I have three pages here (App.js - Button.js - Template.js)
I want when user clicks on each button in Button.js, Template.js page to open with a specific data from api(Here I have an Artificial api contains with objects each object contains specific info about digital curency)I want when I click on for example bitcoin button template page renders with bitcoin info in it

App.js

import { useState } from "react";
import Button from "./Button";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Template from "./Template";
const api = [
{ id: 1, name: "bitcoin", abbr: "btc" },
{ id: 2, name: "theter", abbr: "ttr" },
{ id: 3, name: "ethereum", abbr: "eth" },
];

export default function App() {
return (
    <BrowserRouter>
        <Routes>
            <Route path="/template" element={<Template data={api}/>} />
            <Route path="/button" element={<Button data={api}/>} />
        </Routes>
    </BrowserRouter>
 );
 }

Button.js

import React from "react";
import { Link } from "react-router-dom";

export default function Button(props) {
console.log(props.data);
return (
    <div>
        {props.data.map((item) => {
            return (
                <Link to={`/template`}>
                    <button btn-id={item.id}> {item.name}deposit</button>
                </Link>
            );
        })}
    </div>
 );
 }

Template.js

import React from "react";

export default function Template({ data }) {
console.log(data);
return (
    <div>
        {/* name */}
        <h1>Lorem.</h1>
        {/* abbr */}
        <span>hasan</span>
        {/* id */}
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
            consequatur.
        </p>
    </div>
);
}