React Hook Used to Toggle Image Does not Update During Function Call

Question

I am trying to toggle a gif that represents the loading of a file. I tried doing this by using a react hook isLoading.

The function called upon button click is the following:

function checkFeasibility(e){
      e.preventDefault()
      setIsLoading(true)
      console.log("Checking Feasibility");
      griddata.allowableVoltageDevs = allowableVoltageDevs;
      var request = new XMLHttpRequest();
      request.open("POST",'http://localhost:5000/checkFeasibility',false);
      request.setRequestHeader('content-type', 'application/json');
      request.send(JSON.stringify(griddata));
      //setGriddata(griddata =>{ return JSON.parse(request.responseText)});
      //setState(createGraph(griddata));
      var res = JSON.parse(request.responseText)
      console.log(request.responseText)
      console.log(JSON.parse(request.responseText))
      if(!res.ok){
        plotFeasibility(res);
        setControlLawLabel("GRID IS INFEASIBLE!");
      }
      else{
        plotFeasibility(res);
        console.log(res)
        var controlledGenBusses = griddata.gen.bus
        console.log(controlledGenBusses)
        console.log("feasible")
        var controlLawString = ""
        for(var i =0;i<controlledGenBusses.length;i++){
          if(res.S[controlledGenBusses[i]-1][controlledGenBusses[i]-1]!=0){
            var foo = "q(" + String((controlledGenBusses[i]-1)) + ") = " +String((res.S[controlledGenBusses[i]-1][controlledGenBusses[i]-1]).toFixed(2)) + " p("+String((controlledGenBusses[i]-1))+")" + "\r\n";
            console.log(foo)
            controlLawString = controlLawString + foo
          }
        }
        setControlLawLabel(controlLawString);
        console.log(controlLawLabel)
      }
      
      //  setState(graphx);
      console.log("Checked Feasiblity")
      setIsLoading(false)
      
    }

Here setIsLoading changes the hook. This is used in the follwing code section:

<div>
    {isLoading ? <Loading /> : <div className='loading'></div>}
</div>

The Loading component looks like this:

import React from 'react';
import './index.scss';

const Loading = () => {
  return (
    <div className="loading">
      <img className='loading' src="loading.gif" alt="loading" />
    </div>
  );
};

export default Loading;

Unfortunately never changes because isLoading does not get updated until it is false again. Is there a mistake in my thought process and how can I fix this problem? If no is there a better way to represent loading of a file?