TypeError: this.props.fetchUser is not a function. (In 'this.props.fetchUser()', 'this.props.fetchUser' is undefined)

Question

I'm using react native , redux and expo : My Main function is as follows:

import React, { Component } from 'react'
import { View, Text} from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser } from '../redux/actions/index'

//import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//const Tab = createBottomTabNavigator();


const Stack = createStackNavigator()

export class MainScreen extends Component {
    componentDidMount(){
        this.props.fetchUser()
    }
  render() {
    const {currentUser} = this.props;
    console.log(currentUser)

    if (currentUser == undefined){
        return(
          <View></View>
        )
    }
    
    return (
      

      <View style={{flex:1, justifyContent:'center'}}>
        <Text>{currentUser.firstname} User is Logged in</Text>

      </View>
      
    )
  }
}

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch)=> bindActionCreators({fetchUser}, dispatch);



export default connect(mapStateToProps, mapDispatchProps)(MainScreen);

and my action/index.js is as follows:

import firebase from "@firebase/app-compat";
import { USER_STATE_CHANGE } from "../constants/index";

export function fetchUser(){
    return((dispatch) => {
        firebase.firestore()
        .collection("users")
        .doc(firebase.auth().currentUser.uid)
        .get()
        .then((snapshot)=> {
            if (snapshot.exists){
                dispatch({type: USER_STATE_CHANGE, currentUser:snapshot.data()})
            }
            else{
                console.log('does not exist')
            }
        })

    })
}

Here, When i "expo start -c " this then I'm getting

TypeError: this.props.fetchUser is not a function. (In 'this.props.fetchUser()', 'this.props.fetchUser' is undefined) . But it looks like the fetchuser is defined

I tried running this and it returned this error:

TypeError: this.props.fetchUser is not a function. (In 'this.props.fetchUser()', 'this.props.fetchUser' is undefined)

This error is located at:
    in MainScreen (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:217)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:281)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:279)
    in RCTView (at View.js:32)
.
.
..
.
..
.
.
..
.
.