Search Input for ANTD Table

Short answer: When we call setDataSource(dataLog) inside the useEffect hooks for initial render (mounting) that would save empty array in dataSource variable, which can be used for showing empty list icon or loading, we have to set data source again when the data is fetched so, we can use another useEffect hook for logs state variable and set data source in it.

useEffect(() => {
    setDataSource(dataLog);
}, [logs]);

Details:
What we are trying to achieve with these hooks i.e. useEffect, is that we can write a code which can react when defined action occur, e.g. what we did in useEffect is that on initial render (mount phase), we set empty array and then call the API. After that when data arrives we set logs i.e. setLogs(jsonData).
Which will populate the logs variable, then that loop come into play and dataLog will get filled but after that we never set the data source again with this DataLog i.e. filled list of objects (we only did that in for mount phase in which dataLog was empty, or when onChange get triggered)
So, a simple solution can be to use useEffect hooks for logs variable so, whenever the logs variable change, it will set the data source as well. As defined above in short answer.
Thus, with these hooks, we can significantly refactor this code.

One More Thing: I recommend using getAllLogs function with await keyword, that will make that async code works like sync one i.e.

useEffect(async () => {
    await getAllLogs();
}, []);

I (try to) reproduce it here