Creating a table to display rows from a database

I'm trying to create a table that will display the rows of a database called patients and I have created this using Django as the back-end and react as the Front-End. When I try to implement the code I have created thus far the only thing I'm seeing on the webpage is my table header. It should be noted that I have checked sqlite studio and there is data stored in the table. I've checked on PostMan and my Get, POST,PUT, and DELETE methods are all working fine and do what I intend them to do. I'm using Firefox as my browser and I've checked the network tab under inspection, but nothing is being sent to the back-end. I will attach my initial attempt at the front-end webpage

import React, {Component} from 'react'
export class ViewPatients extends Component{
    constructor(props){
        super(props);
        this.state = {
            patient: [],
        };
    }
    fetchPatients = () => {
        fetch('http://127.0.0.1:8000/patient')
        .then(response => response.json())
        .then(data=> {
            this.setState({patient:data});
        })
        .catch(error => {
            console.error("Error Fetching Patients")
        });
    };
    componentDidMounted(){
        this.fetchPatients();
        // this.refreshList();
    }
    render(){
        const {
            patient
        } = this.state;
        return(
            <div>
                <table>
                <thead>
                <tr>
                <th>ssn</th>    
                    <th>address</th>
                    <th>age</th>
                    <th>gender</th>
                    <th>race</th>
                    <th>
                    medical history
                    </th>
                    <th>occupation</th>
                    <th>phone number</th>
                    <th>username</th>
                </tr> 
                </thead>
                <tbody>
                    {patient.map(pat => (
                    <tr key={pat.ssn}>
                        <td>{pat.ssn}</td>              
                        <td>{pat.address}</td>
                        <td>{pat.age}</td>
                        <td>{pat.gender}</td>
                        <td>{pat.race}</td>
                        <td>{pat.medicalHistory}</td>
                        <td>{pat.occupation}</td>
                        <td>{pat.phoneNumber}</td>
                        <td>{pat.username}</td>
                    <td>{/* Display scheduled vaccines here */}</td>
                </tr>
                    ))}    
                </tbody>               
                </table>
            </div>
        )
    }
}

I will also provide my model.py for reference

def validate_length(phone):
    if not (phone.isdigit() and len(phone) == 10):
        raise ValidateError('%(phone)s must be 10 digits', params={'phone':phone})
def IDVarifier(id):
    if not (id.isdigit() and len(id) == 9):
        raise ValidateError('%(id)s must be 9 digits', params={'id':id})
class Patient(models.Model):
    ssn = models.CharField(primary_key = True, max_length = 9)
    address = models.CharField(max_length = 50,default = '123 fake st')
    age = models.IntegerField(default = 0)
    gender = models.CharField(default = 'None', max_length = 6)
    race = models.CharField(default = 'None', max_length = 10)
    medicalHistory = models.CharField(max_length = 200, default = 'None')
    occupationalClass = models.CharField(max_length = 100, default = 'None')
    phoneNumber = models.CharField(max_length = 10,validators = [validate_length], default = '1234567890')
    username = models.ForeignKey("Credentials",max_length = 10, default = "default", on_delete=models.SET_DEFAULT)

Through a little troubleshooting and banging my head against a wall for over looking this, it appears that I miss typed componentDidMount(). I had typed componentDidMounted(). Thank you to @rabbibillclinton for taking the time to look over the post