Почему в моём случае не работает onClick?

Question

[Fi1iN]

Почему в моём случае перестает работать ripples? Если не устанавливать useState, то работает отлично. Но вот именно используя этот хук он перестает работать. Если вызывать его вне компонента <MyRipples>, а например в div он вообще никак не работает, зато сам Ripples отрабатывает на ура. В чем может быть причина и как это исправить?

import { useState } from "react";
import styles from "./Test.module.scss";
import { createRipples } from 'react-ripples'
 
const Test = () => {
    const [count, setCount] = useState<number>(0);
    
    const MyRipples = createRipples({during:700,color: 'red'})

    const handleClick = (index: number) =>  {
        setCount(index);
    }
    return(
        <>
<div><MyRipples onClick={() => handleClick(1)}><button className={styles.button}>1</button></MyRipples></div>
        </>
    )

}

export default Test;