Next.js：npm run buildするときに「Error: Component definition is missing display name」が発生、その対処について

実行環境

• Next.js 13.0.6
• Javascript

エラー内容

Next.jsでWebアプリケーションを作っている際に、npm run buildしたとき、ESlintで下記のようなエラーが発生しました。

Error: Component definition is missing display name  react/display-name

調べてみると、Reactのコンポーネントに名前がついていないことが原因の模様。

https://qiita.com/acro5piano/items/1cffa8c6b52a36e6bb73

Reactのコンポーネントとは、公式ドキュメントによると、

任意の入力を受け取り、画面上に表示すべきものを記述する React要素

のことを意味するようです。

https://ja.reactjs.org/docs/components-and-props.html

調べていると、さきほどのエラーは

The error is often caused when using forwardRefs in React.
forwardRefsをReactで使うとエラーになることが多い

といったことが紹介されていました。

https://bobbyhadz.com/blog/react-component-is-missing-display-name

ソースコードを見直すと、forwardRefsを使っている箇所がありました。
変更前は、下記のようにアロー関数で関数名を省略していました。
なので、アロー関数を使うことをやめて、変更後のように関数名を指定しました。
そうしたところ、はじめのESlintのエラーが発生しなくなりました。

変更前

const Input = forwardRef((user, ref) => {
          // ...省略...
)}

変更後

const Input = forwardRef(function useTest(user, ref){
          // ...省略...
)}