I am using external API of getting my data, that I fetch with axios.

I am able to receive data and map through them without any issues, but I need to be able to click on specific item from data and go to another page, that shows detailed data of that specific click item

(you can imagine it as blog that has blog posts and when you click on individual post, you get data only related to that post)

This is how I fetch my items in parent component:

 const [items, setItems] = useState([]);

    useEffect(() => {
        const getItems = async () => {
            try {
                const response = await axios.get(
                    'APIendpoint'
                );
                console.log(response);
                const final = response.data;
                setItems(final);
            } catch (error) {
                console.log(error);
            }
        };
        getItems();
    }, []);

And just mapping through them, with Link to another page:

 {items && items.map((item) => (
                        <div key={item.id}>
                            <Link to={`/closet/${item.id}`}>{item.name}</Link>
                        </div>
 ))}

And my router, which works and url does update:

<Route exact path="/"><App /></Route>
<Route exact path="/:id"><Component items={items}/></Route>

Now in Component.jsx I tried to do something like this:

const Main = ({ items }) => {

 useEffect(() => {
        const getDetail = async () => {
            try {
                const response = await axios.get(
                    `APIendpoint/${closetItems.id}` // path to the id 
                );
                console.log(response);
                const detail = response.data;
                setClosetItems(detail);
            } catch (error) {
                console.log(error);
            }
        };
        getDetail();
    }, []);

But nothing is happening when I console.log(closetItems) - I am not familiar with it, am I on right path or do I have to change the strategy?