ReactJS User Login with Firebaseui and multiple webpages

I have a login page and a profile page. When the user is logged in, I want them to be redirected to their profile page. Firebaseui has redirect successsignInUrl, but that doesn't allow me to pass information like user profile information. I've tried passing them as props but can't figure it out. Below is my code for LoginPage. Here's my code:

import React, { Component } from 'react';
import Profilepage from './Profilepage';
import Loginuser from './Loginuser';


var firebase = require('firebase');
var firebaseui = require('firebaseui');
var userProfile, checkLog;
var userInfo={
    name: "",
    email: "",
    photoUrl: "",
    uid: ""
};
class ProfileCheck extends Component{
constructor(props){
    super(props);
    this.state=({userIn: checkLog});
}

render(){
// FirebaseUI config.
var uiConfig = {
   signInSuccessUrl: 'http://localhost:3000/ProfilePage',
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    // Terms of service url. -- DO NOT FORGET TO ADD THIS LATER
    tosUrl: '<--Smething--->'
  };

  // Initialize the FirebaseUI Widget using Firebase.
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  // The start method will wait until the DOM is loaded.
  ui.start('#firebaseui-auth-container', uiConfig);

  function initApp(){
        firebase.auth().onAuthStateChanged(function(user){
          if(user){
              //user signed in  
            userProfile = user;           
            userInfo.name = user.displayName;
            userInfo.email = user.email;
            userInfo.photoUrl = user.photoURL;
            console.log(userInfo.name + " " + userInfo.email + " "+ userInfo.photoUrl);
            checkLog=true;
          } else{
              //user is signed out
          }
      },function(error){
          console.log("Error");
      });
  };
  window.addEventListener('load', function() {
    initApp()
  });
    return(
        <div className="loginSection">
        <div className="card loginCard" width="40rem" >
            <div className="card-block">
                <h4 className="card-title"><strong>ChallengeMe</strong></h4>
                <hr/>
                <p className="card-text">
                    ChallengeMe is <strong>a place where people can showcase their skills and get challenged by others.</strong> The goal is to have fun while improving yourself. 
                </p>
            </div>
        </div>
        <div className="card loginCard text-center" >
            <div className="card-block">
                <form className="form-signin" id="validationForm">       
                    <h2 className="form-signin-heading text-center">Login</h2>
                    <hr/>
                            <div id="firebaseui-auth-container"></div>
                    </form> 
            </div>
        </div>
</div>
         );
    }
}
export default ProfileCheck;

      

        
        
        
      

    

I read tons of docs on the internet, but since I'm new to Reactjs, I can't figure it out. If someone can point me in the right direction or help me understand step by step, that would be really great. Thank!