React data from api crookedly comes to the component, what's the problem?

Question

JavaScript

Hello, I'm doing a pet project, I'm still a beginner in React, I'm asking for advice, I've been looking for it myself, but I'm not looking very well or I don't understand what.
In general, I work with api giphy.com, a request is entered into the input, it goes to the api, a response comes, the response goes to the component, the data array is visible in the console, but it is rendered from the second button press - send the request, I assume that the matter is updating the component, but I didn’t find a solution in the docks, I probably didn’t understand
the links to the github to the files
https://github.com/N4sky1/Gifs/blob/master/src/App.js
https://github.com/N4sky1/ Gifs/blob/master/src/com...
https://github.com/N4sky1/Gifs/blob/master/src/com...
thanks for any replies

Answer 1

gist