[nextjs]react-slickでarrowのonclickが効かない

Question

やりたいこと・困っていること

nextjsでreact-slickを使用しスライダーを作成したのですが、sliderのsettingsで
prevArrow,nextArrowを定義してカスタムしたのですがonClick属性が反応しなくて困っています。

コード

import React from 'react'
import styled from 'styled-components'
import Slider from 'react-slick'

type Props = {}

export const samplePage: React.FC<Props> = props => {
  const settings = {
    dots: false,
    prevArrow: <PrevArrow />,
    nextArrow: <NextArrow />,
  }

  return (
    <>
     <Slider {...settings}>
       <div>
         {/* ここにコンテンツ */}
       </div>
       <div>
         {/* ここにコンテンツ */}
       </div>
     </Slider>
    </>
  )
}

const NextArrow = styled.button`
  ~css諸略~
`
const PrevArrow = styled.button`
  ~css諸略~
`

試したこと、調べたこと

まず試したこととしては

  const testFunc = () => {
    console.log(1234)
  }
  const settings = {
    dots: false,
    prevArrow: <PrevArrow onClick={() => { console.log(123) } />,
    nextArrow: <NextArrow onClick={() => { testFunc() }/>,
  }

PrevArrowにonClick属性でconsoleを直接呼び出したり、関数を呼び出してみましたがダメでした。

react-slickの公式などを見てみたのですが解決には至りませんでした。
react-slickの公式ドキュメントで気になったのは
https://react-slick.neostack.com/docs/example/previous-next-methods
以下のページなのですが
これで実装できるのかと思ってnextjsで書こうと思ったのですが書き方がわからず詰まってしまいました。

Comments

[Hogeike]

<PrevArrow />,<NextArrow />は自作のコンポーネントという認識でよろしいでしょうか
だとしたらまず、そのコンポーネント単体でrenderしてonClickが機能しているかを試してみてください
単純に、PrevArrowのpropsに渡したonClickがbuttonに渡されていないだけの可能性があります

[teach]

ご指摘ありがとうございます。

<PrevArrow />,<NextArrow />
これは
styled-componetsで定義しています！

なので、

```
return (
<>
< PrevArrow onClick={() => { console.log(123) }}>ボタン</PrevArrow>
</>
```
この場合は動くのに、settingsの中に入れるとonClickは効かないんですよね。。