I need to fetch data from the API and save it on my storage when I load the page first time it doesn't render the data, but when i refresh the page it loads, how can I render the data in the first time I access the page? I have this:

const [showLoading, setShowLoading] = useState(false);
const [projectsIds, setProjectsIds] = useState(false);

  useEffect(() => {
    getToken();
  }, []);
const getToken = async () => {
await apiJson
        .checkPassResetToken(credentials) 
        .then((response) => {
            if (response.status === 200) {
            setShowLoading(true);
            setCredentials(credentials);
            setStage(NEW_PASSWORD);
            removeIdTokenFromUrl();
            localStorage.setItem("projectsId", response.data.data.project);
            localStorage.setItem("keys", JSON.stringify(response.data.data.user));

            setProjectsIds(true)
            setShowLoading(false)
          }
        })
        .catch((err) => {
          if (err) {
            setStage(INVALID_TOKEN);
          }
        });
    }
  };

Then in my return:

projectsIds ? (
                  
  <FormNewPassword
  credentials={credentials}
  stage={stage}
  setStage={setStage}
  removeIdTokenFromUrl={removeIdTokenFromUrl}
  />
  ) : (
  <LoadingComponent heigth={300} width={300} />
  )