How to pass props from one Component to another component with onClick() event in React.js

Quick Help Needed! I have Two React components Vendors and VendorsList. In Vendors.js Component i have asset.asset_name text rendered in table format. What I want is, When I click on I asset.asset_name, I wanted to pass it’s value from Vendors component to VendorsList component. How could I do this?

Here is code for Two Components

Vendors.js

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

const Vendors = () => {
  const [data, setData] = useState({});
  const baseURL =
    "http://127.0.0.1:8000/api/business_process/business-impact/bussiness-assets-detail";

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert("No Data To Show");
        }
      )
      .catch((err) => {
        return false;
      });
  }, []);
  const DisplayData = data.business_assets?.map((asset) => {
    return (
      <tr>
        <td>{asset.business_assets}</td>
        <td onClick={() => alert(asset.asset_name)}>{asset.asset_name}</td>
      </tr>
    );
  });
  return <div></div>;
};

export default Vendors;

**I tried to pass the value here but I ended up alerting the asset.asset_name text.

const DisplayData = data.business_assets?.map((asset) => {
        return (
          <tr>
            <td>{asset.business_assets}</td>
            <td onClick={() => alert(asset.asset_name)}>{asset.asset_name}</td>
          </tr>
        );
      });

Here is VendorsList.js

    import React from "react";
const VendorsList = ({ asset_name}) => {
  const foo = "test" + asset_name;
  return (
    <div>
      <h1>{foo}</h1>
    </div>
  );
};

export default VendorsList;

I need asset.asset_name value to be passed to VendorsList when I click on asset.asset_name value from Vendors component