[BodNS]

Доброго времени суток. Страница на реакте, на ней должен выводиться список, состоящий из заголовка {title} и содержания {body}. При первой отрисовке должны выводится только заголовки и содержание 1-го элемента списка. Далее при нажатии на любой заголовок должно отображаться его содержание, а уже открытое содержание "закрываться". По факту - Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Подскажите, что не так?

const [openId, setopenId] = useState(1);


    const onButtonClick = (liId) => {
       setopenId({openId: openId === liId ? openId : liId})
return (
<div className={styles.li_container}>
                    <ul>
                       <li key = {1}>
                            <button onClick = {onButtonClick(1)} className={styles.headerLi}>Can I see any examples?</button>
                         {openId === 1 &&  <div id="example1" className={styles.bodyLi}>  Our creatives have submitted more than 6 Million names and thousands of logos on our ntests.          
                            </div>}
                        </li>
                        <li key = {2}>
                        <button onClick = {onButtonClick(2)} className={styles.headerLi}>111Can I see any examples?</button>
                         {openId === 2 &&    <div className={styles.bodyLi}>
                                111Our creatives have submitted more than 6 Million names and thousands of logos onubmitted in recent contests.
                                             </div>}
)