I'm trying to let my users download data through a react button.

I've tried using filesaver, as example below.

const saveFile = () => {
fileSaver.saveAs(
  process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
  "MyCV.pdf"
); };

<button className="cv" onClick={saveFile}>
    Download File
</button>

With my application, I have data in json that is stored in the client that I want to return as a json object, the component looks like this

export default function Analytics() {
  const {
    magicData,
    swordData,

    ....
  } = useAnalytics();
  // console.log(sentimentData)
  return (
    <div className="relative">
      ......
        <button className="shadow-md fixed right-20 bottom-20 z-10 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 rounded-full px-5 text-white py-2 bg-blue-500"
        
        >
          Export Data <BiEdit className="inline" />
        </button>
    </div>
  );
}

How would I go about taking magic and sword data and returning it to the user in a JSON file? There isn't clear instructions I can find on taking client-side data, or fetched data for that matter.