How to use useffect cleanup hook in react component?

Question

:)

I have a problem about an useeffect cleanup in React, that I'm not sure how to apply it.

This is the component :

const Hit = ({hit}) => {
    useEffect(() => {
        getSocialNetorks(hit);
        return () => {
            console.log('unmounting...');
        };
    },[hit]);

    function getSocialNetorks(hit){
        const socialNetworkImage = hit.SocialNetwork.map((social,index) =>{
            return <img className='small-logo' src={require('../../assets/socialNetworks/' + social + '.png')} key={index}></img>;
        })
        return socialNetworkImage
    }

    return (
        <div className="hit-card">
            <a target="_blank" rel="noreferrer" href={`${hit.Website}`}>
                <div style={{ backgroundImage: `url(${hit.Image})` }} className="card-image"></div>
                <h4 className="hit-name">
                    <Highlight attribute="Name" hit={hit} />
                </h4>
                <b>Used for :</b><br/>
                <span>{getSocialNetorks(hit)}</span><br/>
                <b>Works on:</b><br/>
                <p className='hit-card--details'> {hit.Deployment}</p>
            </a>
        </div>
    );
}

The error that i get:

react-dom.development.js:67

   Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

So the function getSocialNetorks() is maping and returning some strings, converting the string in images. This are rendered in a window with multiple pages. When I press the no 2 page, the website crashed with the above error. How can i fix it?

Thanks and let me know if Something is unclear :)