React. Как убрать там много рендеров? У меня 5 штук букв "о" вылезает

import {useState, useEffect} from 'react';

import './randomcats.css';

import MainServices from '../../services/MainServices';

// первый блок, с рандомной кошкой
const RandomCats = () => {
    
    const [src, setChar] = useState('');
    const [desc, setDesc] = useState('');
    const [name, setName] = useState('');
    const [temperament, setTemperament] = useState('');
    
    const mainService = new MainServices();
 


    useEffect(() => {
        getResource();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const cons = (item) =>{
        let id = Math.floor(Math.random() * (67 - 1)) + 1;
        setChar(item[id].image.url);
        setDesc(item[id].description);
        setName(item[id].name);
        setTemperament(item[id].temperament);
    }

    const getResource = () =>{
    //данные с api приходят
        mainService.getResource().then(cons)
    }

    return (
        
        <>
            <header>
                <h1>
                    Коллекция котов и кошек
                </h1>
            </header>

            <section className="random-section">
                <div className="addflex">
                    <div className="random-cat">
                        <img src={src} alt="123" />
                    </div>
                    <div className="random-cat">
                        <h2 className="h-center">О кошке</h2>
                        <h3>
                            Порода: {name}
                        </h3>
                        <p>
                         {desc}
                        </p>   
                        <p>
                            Темперамент: {temperament}
                        </p>
                        {console.log('o')}
                        <div className="button-center">
                            <button onClick={getResource}>
                                Случайная кошка
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default RandomCats;