I have a component like this

const ListOfMeds = () => {
  const mockListOfMedicines = [
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
    {
      medicineName: "Augmentin 625 Duo Tablet",
      medicineId: "D06ID232435454",
      groupName: "Generic Medicine",
      stock: 350,
    },
  ];

  const getSpecificMedicineWithId = (number) => {
    const filteredData = mockListOfMedicines.find((medicine) => {
      return medicine.medicineId === number;
    });

    return filteredData;
  };



 return{
           <Some stuff/> 
       }


};
export default ListOfMeds;

i now have another component like this

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

const MedicineInfo = () => {
  let params = useParams();

  return <div>MedicineId: {params.medicineId}</div>;
};

export default MedicineInfo;

I want the second component to call the function getSpecificMedicineWithId in the first component passing in the params objects key as the argument. However, the second component is not a child to the first component so I cannot pass that function as a prop. I also cannot use context because of also the same reason. It's not its child.

If I use export on the first component I get the errors

Modifiers cannot appear here.

and

'import' and 'export' may only appear at the top level. (58:2)

I can't take the getSpecificMedicineWithId function out of its component so as to export it because it depends on the data inside the component to work i.e the mockListOfMedicines array.

Now I'm stuck I don't know how to go about it. Kindly Help.