I am receiving the error of Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state..

It appears that it is because of this code

const LoginAuth = () => {

  navigate(routes.INDEX);

  return null;

};

removing navigate(routes.INDEX); stops the error.

What is wrong with the code? Should I be using another method to redirect an authUser? Any help is appreciated.

It is a part of

import React from 'react';

import { navigate } from 'gatsby';



import AuthUserContext from './AuthUserContext';

import withAuthentication from './withAuthentication';



import Layout from './Layout';

import LoginForm from './LoginForm';    

import * as routes from '../../constants/routes';



const LoginAuth = () => {

  navigate(routes.INDEX);

  return null;

};



const LoginPage = () => (

  <Layout>

    <Transition>

      <AuthUserContext.Consumer>

        {authUser => (authUser ? <LoginAuth /> : <LoginNonAuth />)}

      </AuthUserContext.Consumer>

    </Transition>

  </Layout>

);



const LoginNonAuth = () => <LoginForm />;



export default withAuthentication(LoginPage);