React loop data from array in render

For some reason, I can’t get .map() to render the data.
I tried running the function directly in render and called it from render and nothing happened.

function Contracts(props) {
    const [isLoaded, setLoaded] = useState(true);
    const [error, setError] = useState(null);
    const [equipment, setEquipment] = useState([]);




    useEffect(() => {
        const getContracts = async () => {
            let snapshot = await db.getAllContracts();
            setTimeout(10000);
            if (snapshot) {
                console.log(snapshot);
                setError(null);
                setLoaded(true);
                snapshot.forEach((item, i) => {
                    console.log(item[1]);
                    equipment.push({
                        value: item, date: item.Dato, status: item.Status,
                        start: item.StartLocation, end: item.EndLocation,
                        col: item.Collateral, reward: item.Reward

                    });
                })
                console.log(equipment);

            } else {
                setLoaded(false);
            }
        }
        getContracts();

    }, [])

    const handleClick = (e) => {
        let target = e.target;
        let selectedEquipmentIndex = target.parentElement.getAttribute("dataset-id");
        this.setState({
            selectedEquipment: selectedEquipmentIndex
        });
    }

    const renderItems = () => {
        const data = equipment;
        console.log(data);
        const listItems = data.map(
            (element) => {
                console.log(element);
                return (
                    <id className="row" key={element} dataset-id={element} onClick={handleClick}>
                        <p className="date">{element.date.toString()}</p>
                        <p className="status">{element.status}</p>
                        <p className="start">{element.start}</p>
                        <p className="end">{element.end}</p>
                        <p className="col">{element.col}</p>
                        <p className="reward">{element.reward}</p>
                    </id>
                )
            }
        )
        return (
            <div>
                {listItems}
            </div>
        )
    }



    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
            <article id="header">
                <article id="content">
                    <section class="container">
                        <div classname="header"><h1></h1></div>
                        <div className="titleArea">
                            <div className="eqnavn"><h1>Date: </h1></div>
                            <div className="eqstatus"><h1>Status: </h1></div>
                            <div className="eqstart"><h1>Start: </h1></div>
                            <div className="eqend"><h1>End: </h1></div>
                            <div className="eqcol"><h1>Collateral: </h1></div>
                            <div className="eqreward"><h1>Reward: </h1></div>
                        </div>
                        {renderItems}

                    </section>
                </article>
            </article>
        )
    }
}

export default Contracts;

And I do get data from my database:

    [{…}]
0: 
col: "270000"
date: 1666454928600
end: "asdas"
reward: 49705
start: "asdasd"
status: "Not Taken"
value: {EndLocation: 'asdas', Size: 'Max 40T Space Safe', StartLocation: 'asdasd', Collateral: '270000', Username: 'Saphyron', …}

I hope someone can help me cause I’m getting stuck. Tried following some of the guides here but most is 5+ years old and does not work sadly.

>Solution :

You have to use the functions you’ve declared

{renderItems()}

instead of

{renderItems}