Button don't passing data to another component. React

I have a component which is a button. Then in another component i am looping trough concerts and using this button to redirect to booking page but after clicking my data is not passed.

This is my button component:

    import React from "react";

export const BookBtn = (props) => {
  return (
    <div>
      <button
        className="bookBtn"
        style={{ backgroundColor: props.color }}
        // onClick={props.func}
      >
        {props.text}
      </button>
    </div>
  );
};

BookBtn.defaultProps = {
  text: "Unavailable",
};

export default BookBtn;

Here is the button in my main component where I try to click

 <a href={"/concert/" + concert.id} data={concert}>
                  <BookBtn text="Book a ticket" />
                </a>

Here is my component where i try to redirect to and retrive my data.

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

export const Book = (data) => {
  const [concerts, setConcerts] = useState([]);
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const loadConcerts = async () => {
      const resConcerts = await axios.get("data/concerts");
      const tickets = await axios.get("/data/tickets");
    };
  });
  return (
    <div>
      Booking page
      <h1>{data.name}</h1>
    </div>
  );
};

UPDATE:

I wrapped my button in anchor tag and now i am able to redirect but still can't pass data.

Final Update

Allright, i managed to pass my data using useLocation hook.
Problem is solved.

I'd suggest using react-router to do the redirection or routing instead of anchor tags as they cause a refresh.

Use the Link tag from react-router and pass the concert state along with it!

Have a look at this https://reactrouter.com/en/main/components/link.