React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook

Question

I'm getting the following error:

React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

I'm not sure exactly what is the error in my code:

import React, {useState, useEffect} from 'react';
import "../App.css"

function shoes() {
    useEffect(() => {
        fetchItems();
    }, []);

    const fetchItems = async () => {
        const data = await fetch('xxxxxxxxxxxxxxxxxxxxx')
        console.log(data)
    };

    return ( < h1 className = "main" > Shoes < /h1> );
    }
}

export default shoes;

Answer 1

As described here, React component names need to start with a capital letter.
That's because React treats components starting with a lowercase letter as DOM tags.

Therefore you should name it Shoes.