React Native tab navigator re-render screen component

Question

Here is my code which implements a simple tab navigator. In one of the screens I need to make a request to an API and update the states every time the screen is selected by user via the tab navigator. As shown below the componentDidMount is not executed after first time (Second attempt fails on execution).

export default class UserAccount extends Component {

    constructor(props) {
        super(props)

        this.state = {
            sample:''
        }
    }

    componentDidMount = async () => {

       // Api fetch 
       // ...

       await this.setState({sample: api.response})

    }

    render() {
        return (
            ...
        )
    }
}

And the tab navigator is:

<Tab.Navigator>
    <Tab.Screen options={{
        tabBarIcon: ({ focused }) => (
            <MaterialIcons name="home" color={focused ? activeTintLabelColor : inactiveTintLabelColor} size={23} />
        ),
    }} name="Home" component={Home} />
    <Tab.Screen options={{
        tabBarIcon: ({ focused }) => (
            <FontAwesome5 name="wallet" color={focused ? activeTintLabelColor : inactiveTintLabelColor} size={20} />
        )
    }} name="Wallets" component={UserWallets} />
    
</Tab.Navigator>

What should I do to let the tab navigator re-renders the screen component which causes the execution of componentDidMount?

Regards.