React Component not updating upon prop change

I have a table that will display data fetched from an API:

import React from "react";
import { Container, Table } from "react-bootstrap";

class Purchasing extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Container>
                <h1>Purchasing</h1>
                <Table bordered hover>
                    <thead>
                        <tr>
                            <td>Part No.</td>
                            <td>Available Qty.</td>
                            <td>In Stock Lifetime</td>
                            <td>On Order Qty.</td>
                            <td>On Order Lifetime</td>
                            <td>Average / Month</td>
                            <td>Last Updated</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            (this.props.lifetimes.map(lifetime => {
                                <tr key={lifetime.partno}>
                                    <td>{lifetime.partno}</td>
                                    <td>{lifetime.availableqty}</td>
                                    <td>{lifetime.in_stock_lifetime}</td>
                                    <td>{lifetime.onpurchaseqty}</td>
                                    <td>{lifetime.on_order_lifetime}</td>
                                    <td>{lifetime.average}</td>
                                    <td>{lifetime.updated}</td>
                                </tr>
                            }))
                        }
                    </tbody>
                </Table>
            </Container>
        );
    }
}

export default Purchasing;

Purchasing is passed the lifetime prop from the root component App.js. The API call is made during App.js componentDidMount() lifecycle hook:

async componentDidMount() {
        console.log('App.js Mounted.')
        let loggedIn = await this.isLoggedIn();
        if (loggedIn) {
            let permissions = await BackendService.getUserPermissions(this.state.id, this.state.token);
            this.setState({'permissions' : permissions, 'active' : 'Home'});
            if (this.state.permissions.includes('viewPurchasing')) {
                let lifetimes = await BackendService.getItemLifetimes();
                this.setState({'lifetimes' : lifetimes});
            }
        } else {
            console.log('Not logged in...')
            this.setState({ 'active': 'Login' })
        }
    }

As you can see, once App.js is mounted, and the user is logged in, then lifetimes will be fetched from the API. Using the React dev-tools, I can see that lifetimes is populated, and it is indeed passed as a prop into Purchasing. However, the table has no content, and only shows the header. This is despite the fact that props.lifetimes is populated.

I understand that there will be some latency loading this data, so perhaps the component is loaded with no props at first, but once the data is returned from the server the components props should be updated, and thus the component should rerender and show the content, but it does not.

Purchasing is passed lifetimes as a prop within App.js:

return (<Purchasing lifetimes={this.state.lifetimes}/>)

The structure of lifetimes is an array of objects. I can even check the length of props.lifetimes from within Purchasing on render, yet still no table data is every actually rendered.