Estoy tratando de replicar la cuadrícula de búsqueda y mampostería de la documentación oficial usando su ejemplo de Codesandbox .

Sin embargo, cuando trato de usarlo, el código no devuelve ningún gif.

He verificado que JS fetch está devolviendo gifs, parece que la cuadrícula no está llamando a la función fetchGifs .

También tengo el mismo problema con el componente Carousel.

¿Alguien puede ayudarme con este problema?

Enlace Codesandbox para mi implementación: https://codesandbox.io/s/cocky-waterfall-ny9rzk Componente que estaba tratando de usar: búsqueda y cuadrícula de https://github.com/Giphy/giphy-js/tree/master/ paquetes/reaccionar-componentes

 import { GiphyFetch } from "@giphy/js-fetch-api"; import { Grid } from "@giphy/react-components"; import useDebounce from "react-use/lib/useDebounce"; import React, { useState } from "react"; export default function App() { const giphyFetch = new GiphyFetch("PZpYG85wQpugMlEx02GGqeKfKZ8eMdFZ"); const [debouncedInput, setDebouncedInput] = useState<string>(""); const [term, setTerm] = useState<string>(""); useDebounce(() => setTerm(debouncedInput), 500, [debouncedInput]); const NoResults = <div className="no-results">No Results for {term}</div>; const fetchGifs = (offset: number) => { return giphyFetch.search(term, { offset, limit: 10 }); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <input placeholder="type to search" onChange={({ target: { value } }) => setDebouncedInput(value)} value={debouncedInput} /> <Grid key={term} columns={3} gutter={6} noResultsMessage={NoResults} width={400} fetchGifs={fetchGifs} /> </div> ); }