How do I call firebase functions from within a react component

I just updated the firebase from ^4.8.0 to ^7.21.0

And now i am able to use httpsCallable

Per the documentation you need to use the firebase library in the client side to make the call to the callable function. You shouldn't be importing the server-side functions code, that needs to be deployed to firebase functions on its own -- it is not reused in the client side of the app.

Assuming you have properly imported the firebase client SDK into your client code, this means we can modify callFirebaseFunction like so:

const callFirebaseFunction = event => {
    const callableReturnMessage = firebase.functions().httpsCallable('returnMessage');

    callableReturnMessage().then((result) => {
      console.log(result.data.output);
    }).catch((error) => {
      console.log(`error: ${JSON.stringify(error)}`);
    });
}