I am trying to display Nfts on my page but it gives and error like Uncaught TypeError: Cannot read properties of undefined (reading 'map'). So my nfts variable is an array but still mapping is not possible. Here is my component:

import React, { useState, useEffect } from "react";
import { Container, Row, Col } from 'react-bootstrap';
import axios from 'axios';
import { Link } from "react-router-dom";

const Nfts = ({ walletAddress }) => {
    const sender = "abc";
    const apikey = "def";
    const [nfts, setNfts] = useState();
    const getNftData = () => {
        axios.get(``)
            .then(output => {
                setNfts(output.data.result)
        })
    }
    useEffect(() => {
        getNftData();
    }, []);
    return (
        <section className="my-nfts">
            <Container>
                <Row>
                    {nfts == '' ?
                        <><div className='mynft-title'>My NFTs</div>
                            <div className="empty-nft">There is no NFT to display</div></> : (
                            <>
                                {nfts.map((nft, index) => {
                                    if (nft.from == sender && nft.to == walletAddress) {
                                        <Col xs={12} md={12} lg={4}>
                                            <div key={index}>{nft}</div>
                                        </Col>

                                    }
                                })}
                            </>
                        )}
                </Row>
            </Container>
        </section>
    );
}

export default Nfts;

So I beleive it doesnt render at the first time when page is loaded. But i might be wrong. What do you think I am making wrong? Thanks..