my file/folder structure

test.ts

import { useEffect, useState } from "react";
import axios from "axios";

//  |
//  |
//  |--services (all API fetching goes here)
//  |----people.js
//  |--hooks (all custom hooks goes here)
//  |----useEndpoint.js
//  |--pages
//  |----index.jsx
//  |

function fetchEndpoint() {
  try {
    const { data } = axios("/endpoint"); // {... count: 44, results:[ ... ] }
    return data.results;
  } catch (error) {
    // log error to error managment software
    logErrorSentry(error);

    // throw error to UI for user feedback
    throw Error("something");
  }
}

function useEndpoint() {
  const [data, setData] = useState();
  const [error, setError] = useState();
  const [loading, setLoading] = useState();

  useEffect(() => {
    async function getEndpoint() {
      try {
        setLoading(true);
        const response = await fetchEndpoint();
        setData(response);
      } catch (error) {
        setError(true);
      } finally {
        setLoading(false);
      }
    }
    getEndpoint();
  }, []);

  return {
    data,
    error,
    loading,
  };
}

function Comp() {
  const { data, error, loading } = useEndpoint();

  if (error) return <div>error</div>;
  if (loading) return <div>loading...</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}