React Use same component for different data imports

Question

I am trying to use the same component of "basicPage" in React for multiple data sources. Currently I have it working for one data set "productsData" but would like to resuse the same component if for pillow, duvets, beds etc

import React from "react";
import productsData from "./dataBeds";
import productsData2 from "./dataPillows";
import { Link, Route, useParams, useRouteMatch } from "react-router-dom";
const BasicPage = () => {
  const products = productsData.map(product => {
     return (
  <div key={product.id}>
    <h3>
      <Link to={`/basicPage/${product.id}`}>{product.name}</Link>
    </h3>
    <p>Price: ${product.price}</p>
    <hr />
  </div>
);
});
return (
  <div>
    <h1>Basic Page for ref</h1>
      {products}
  </div>
  );
 };

export default BasicPage;