Problem with useEffect() in React project

I've got this React app which sends a 'Post' request. The problem is that: i'm using useEffect(() to automate the sending process of my messages and the application is not capturing the "Authorization Bearer token***!@#!!@$#$" and as a consequence i received 400 http error. As far as i just i click the send button the return is: 200 ok. Something even more stange is that everytime i initialize this React app and write something wrong inside my code intentionally and right after i fix the line which i wrote to cause the error msg, my useEffect() works perfectly without the necessity of press send button. And this is the behavior i'm waiting for. I don't understand why the application only works perfectly when i update some code into the Javascript or when i click the button. Have anyone seen something like this? Here is my useEffect():

useEffect(() => {
     
  const handleClick = () => {
  setInterval(() => {
   try {
      handleOnDataTrigger();
   catch (error) {
      console.error('Error in handleOnInputSend:', error);
   }
   , 20000);
  };
   handleClick();
  []);

And this is the excerpt when the app makes the POST request:

try {
      const response = await axios({
        url: url,
        method: reqMethod,
        params: convertKeyValueToObject(queryParams),
        headers: convertKeyValueToObject(headers),
        data,
      });

        

console.log("Result of post:\n");
        console.log(response);
                                
        setResponse(response);
  
 catch (e) {
   console.log(e);
  setResponse(e);

I'll provide more information soon. But i'm really having a hard time with this problem and didn't find any solution yet.