I kept the values entered in the bmi calculation project as an object in localStorage^. I'm having trouble trying to view it. I have an error which is "Cannot read properties of null (reading 'DaTe')". What can I do?

Here are the values I declared:

function storeData() {
        var today = new Date();  
        var date = (today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();
        let formData = JSON.parse(localStorage.getItem('formData')) || [];
        formData.push({
            DaTe : date,
            resultBmi: bmiResult,
            Name: values.name,
        });
        localStorage.setItem('formData', JSON.stringify(formData));
    }
    useEffect(()=>{
        storeData();
    },[bmiResult]) 

Calculations.js: 
function Calculations() { 
    return (
        <div className="calc-page" >
            <h2>CALCULATIONS</h2>
            <table id="records">
                <tbody>
                    <tr>
                    <th>Date</th>
                    <th>Name</th>
                    <th>BMI</th>
                    </tr>
                    {(localStorage.getItem("formData")) && JSON.parse(localStorage.getItem("formData")).map(data=>{
                    <tr>
                    <td>{data.DaTe}</td>
                    <td>{data.Name}</td>
                    <td>{data.resultBmi}</td>
                    </tr>
                    })}
                </tbody>
            </table>
            <button className="btn-clear">Clear</button>
        </div>
    );
}