React Hook with axios

import React,{ useEffect, useState} from 'react';
import axios from "axios";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Card, Row, Container, Col } from 'react-bootstrap';

const Product = () => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        const fetchData = async () => {
            const result = await axios(
                'API_URL',
            );

            // console.log(result.data.data)            setProducts(result.data.data);
            setLoading(false);
        };

        fetchData();

    }, []);


    return (
        <>
            <Container>
                <Row>
                    { loading && <div>Loading...</div> }

            { products.map((product,index) =>
                <Col xs={12} md={3} key={index}>
                <Card>
                    <Card.Img variant="top fluid"  src="https://via.placeholder.com/200" />
                    <Card.Body>
                        <Card.Title>{product.name}</Card.Title>
                        <Card.Text>
                            Some quick example text to build on the card title and make up the bulk of
                            the card's content.
                        </Card.Text>

                    </Card.Body>
                </Card>
                </Col>
            )}

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

export default Product;