Importing data in form of Json file from one file to another through react component

Question

I was trying to fetch data from an API and store it in a variable and further export it to another file, this is how I imported the data from the API:

  export default function Data(){
  const f = async () => {
  const res = await fetch("https://reqres.in/api/users/");
  const json = await res.json();
  React.useEffect(() => {
    f();
  }, []);
  return(json.data)
  
}};

Upon importing and consoling the imported data in the other file, I get this in the console,

ƒ Data() {}
<constructor>: "Function"
name: "Function"

What could be the possible reason for this and how can i fix it? For more reference I am attaching the code sandbox link