Custom firebase functions in react app not returning value

I have made some custom firebase functions for my react app, so I don't have to write the whole code every time. The issue is that when there is a value to return (such as a user JSON), it doesn't return it when I called from another file.

Here is the piece of code not working:

Functions.js

import * as firebase from 'firebase'

const AuthState = () => {
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      return user;
    } else {
      return null;
    }
  });
};

export {AuthState}

I call it in my React entry file: App.js

import {AuthState} from './Functions'

class App extends Component {
  componentDidMount() {
    const result = AuthState();
    console.log(result) // Undefined
  }
  ...

I have tried to use normal functions rather than arrow functions but it doesn't fix the problem.