I have this file as App.js .. I created a signup page which uses twitter login.. now after signup.. backend redirect to "/" ..so ideally setTokens method should be called but.. it's not getting called.. (I am fairly new to react)

App.js

import React, { useState } from 'react';
  import Header from './components/layout/Header';
  import Footer from './components/layout/Footer';
  import CoinTable from './components/coins/CoinTable';
  import RepoPage from './components/coins/RepoPage';
  import TopRepos from './components/repos/TopRepos';
  import RepoDataCard from './components/repos/RepoDataCard';
  import TopDevs from './components/developers/TopDevs';
  import ReactGA from 'react-ga';
  import Services from './components/Services';
  import ScammersList from './components/scam/ScammersList';
  import GetListed from './components/general/GetListed';
  import CoinReleases from './components/releases/CoinReleases';
  import ShitCoinTable from './components/shitcoin/ShitCoinTable';
  import ShitCoin from './components/shitcoin/ShitCoin';
  import ExchangeTable from './components/exchanges/ExchangeTable';
  import ExchangeCoinTable from './components/exchanges/ExchangeCoinTable';
  import PrivacyPolicy from './components/general/PrivacyPolicy';
  import Tnc from './components/general/Tnc';
  import HomePage from './components/hunt/HomePage';
  import PrivateRoute from './components/PrivateRoute';
 
  import { AuthContext } from "./components/context/auth";
 
  import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
  import Signup from './components/Signup';
 
  function App(props) {
    const [authTokens, setAuthTokens] = useState();
   
    const setTokens = (data) => {
      console.log("got it")
      fetch("http://127.0.0.1:8080/auth/login/success", {
        method: "GET",
        credentials: "include",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "Access-Control-Allow-Credentials": true
        }
      })
        .then(response => {
          if (response.status === 200) return response.json();
          throw new Error("failed to authenticate user");
        })
        .then(responseJson => {
          setAuthTokens(responseJson.user);
        })
        .catch(error => {
          console.error("Not able to Login")
        });
    }
 
    return (
      <AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }}>
      <Header />
        <Switch>
            <Route exact path='/' component={CoinTable} />
            <Route exact path='/signup' component={Signup}/>
            <PrivateRoute exact path='/home' component={HomePage}/>
            <Route path='/coin' component={RepoPage}/>
            <Route path='/' component={CoinTable}/>
        </Switch>
      <Footer />
 
      </AuthContext.Provider>
    );
  }
 
  export default App;

HomePage.js

import React, { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import { Button } from "@material-ui/core";

function HomePage() {
  const { authTokens, setAuthTokens } = useAuth();
  

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    fetch("http://127.0.0.1:8080/auth/login/success", {
      method: "GET",
      credentials: "include",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Access-Control-Allow-Credentials": true
      }
    })
      .then(response => {
        if (response.status === 200) return response.json();
        throw new Error("failed to authenticate user");
      })
      .then(responseJson => {
        console.log("token",responseJson)
        setAuthTokens(responseJson.user);
      })
      .catch(error => {
        console.error("Not able to Login")
  });
  });

  

  return (
    <div>
      {!{authTokens} ? (
        <h1>Welcome!</h1>
      ) : (
          <div>
            <h1>You have login succcessfully!</h1>
            {/* <h2>Welcome {authTokens.name}!</h2> */}
          </div>
        )}
    </div>
  );
}

export default HomePage;

Signup.js

import React, { useState } from "react";
import { useAuth } from "../components/context/auth";
import { Button } from "@material-ui/core";

function Signup() {
  const { authTokens } = useAuth();
  console.log("authtokns",authTokens);

  const _handleSignInClick = () => {
    // Authenticate using via passport api in the backend
    // Open Twitter login page
    // Upon successful login, a cookie session will be stored in the client
    window.open("http://127.0.0.1:8080/auth/twitter", "_self");
  };

  const _handleLogoutClick = () => {
    // Logout using Twitter passport api
    // Set authenticated state to false in the HomePage
    window.open("http://127.0.0.1:8080/auth/logout", "_self");
    this.props.handleNotAuthenticated();
  };

  return (
    <div>
       {authTokens ? (
          <li onClick={_handleLogoutClick}>Logout</li>
        ) : (
          <li onClick={_handleSignInClick}>Login</li>
        )}
    </div>
  );
}

export default Signup;