gifs.fixed.tsx

// libs/gifs/src/lib/gifs.tsx
export const Gifs = (props: GifsProps) => {
  // ...
  const getFetchUrl = useCallback(
    () =>
      // Return `null` if query is empty
      query
        ? `https://api.giphy.com/v1/gifs/search?api_key=${
            props.apiKey
          }&q=${query}`
        : null,
    [query]
  );

  useEffect(
    () => {
      async function fetchData() {
        const url = getFetchUrl();
        if (url) {
          const result = await axios(url);
          // ...
        } else {
          // Skip API request if url not found
          setGifs([]);
        }
      }

      fetchData();
    },

    [getFetchUrl]
  );
  // ...
}