Take function from one file to another (React)

Question

So I'm struggling to pass "polygonNFTs" to another file. I need to find its number to decide give user permission or not. its working in index but not in navbar component is there any solution?

index.js

import React, { useState, useEffect } from "react";
import { useMoralis } from "react-moralis";
import { useMoralisWeb3Api } from "react-moralis";
import { useNavigate } from "react-router-dom";

function WritersPage() {
 const { isAuthenticated, user } = useMoralis();

  const Web3Api = useMoralisWeb3Api();

 useEffect(() => {
    ETHData();
 }, []);

 let navigate = useNavigate();

  function redirectHome() {
   navigate("/");
  }
 function redirectLogin() {
   navigate("/signin");
  }

 const ETHData = async () => {
   if (!isAuthenticated) {
     redirectLogin();
   } else {
     FetchAPI();
   }
 };

 const FetchAPI = async () => {
const options = {
  chain: "polygon",
  address: user.address,
  token_address: "0x861856B0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
};
const polygonNFTs = await Web3Api.account.getNFTsForContract(options);

if (polygonNFTs.total > 0) { //***this part is working***
  console.log("GG");
} else {
  redirectHome();
}
};

CODE ...

Navbar.js

import React from "react";
import { IconContext } from "react-icons";
import { useMoralis } from "react-moralis";

 const Navbar = ({ toggle }) => {
 const { isAuthenticated, logout} = useMoralis();

  const logOut = async () => {
    await logout();
     console.log("logged out");
  };

return (
   <>
     <Nav>
       <NavLink to="/">
        <h1>SITM</h1>
      </NavLink>
      <Bars onClick={toggle} />
      <NavMenu>
        <NavLink to="/about" activestyle="true">
            About
        </NavLink>
        <NavLink to="/bookshelf" activestyle="true">
          Bookshelf
        </NavLink>
          <NavLink to="/stats" activestyle="true">
        Stats
      </NavLink>
      <NavLink to="/contact" activestyle="true">
        Contact
      </NavLink>
      {isAuthenticated ? (
        <>
         {polygonNFTs > 0 ? ( // ***how to make this part work??***
              <NavLink to="/writer" activestyle="true">
                Writer
              </NavLink>
          ) : (
            <NavLink to="/mybooks" activestyle="true">
              MyBooks
            </NavLink>
          )}
        </>
      ) : null}
    </NavMenu>
    <NavBtn>
      <IconContext.Provider value={{ color: "white", size: "20px" }}>
        {!isAuthenticated ? (
          <NavLink to="/signin" activestyle="true">
            <Icon alt="logo" className="icon-color" />
          </NavLink>
        ) : (
          <NavLink to="/">
            <button className="Buttn" onClick={logOut}>
              <Icon2 alt="logo" className="icon-color " />
            </button>
          </NavLink>
        )}
      </IconContext.Provider>
    </NavBtn>
  </Nav>
</>
);
};

 export default Navbar;

If I add things what are in index.js it gives me error cannot find user.address and also cant put function from outside RETURN tag