Help with useEffect

function HeaderSection() {

  let baseUrl = "https://swapi.dev/api/people";
  const [data, setData] = useState([]);
  const [currentStatus , setStatus] = useState(false);

  let urlToggle = false;

  function urlChange(){
    urlToggle = !urlToggle;
    if(urlToggle)
    {
      baseUrl = "https://swapi.dev/api/people";
    }
    else
    {
      baseUrl = "https://pokeapi.co/api/v2/berry";
    }
  }



  useEffect(()=>{
    fetch(baseUrl)
    .then((response) =>{
      if(!response.ok)
      {
        return Promise.reject( new Error("Response Error!"));
      }
      else
      {
        return response.json();
      }
    })
    .catch ( (err) =>{
      console.log(err);
    })
    .then((json) => {
      try{
        setData(json.results);
        setStatus(true);
      }
      catch
      {
        return Promise.reject(new Error(`State Error!: Data: ${data} , Connection:${currentStatus}`));
      }
    })
    .catch((err) =>{
      console.log(err);
    })
  },[baseUrl]);

  return (
    <div className='gio-main'>

      <div className='gio-container-3'>
       <h1>API Switch</h1>
       <h4>Endpoint request using vanilla JS displayed in custom table</h4>
       <p>You can switch between endpoints using this button!</p>
       <button onClick={urlChange}>Change API</button>
       {!currentStatus ?  <h2>Loading... </h2> : <Table data={data}/>}
      </div>
    </div>
  );
}

export default HeaderSection;