React.jsにおいて、Material-UIを使用時にuseEffectが実行されない

前提・実現したいこと

React.jsでフロントエンドの開発を行っております。
コンポーネント内にMaterial-UIからimportしてきたコンポーネントが入っていると、useEffectが実行されなくなるという現象が起きて困っております。
解決法などご教授いただけないでしょうか？

発生している問題・エラーメッセージ

下記コードにおいて、console.log("hoge1")が実行されません。
しかし、リロードを何度も繰り返すと10回に1回くらいの確率で実行されます。
renderという文字は画面に表示されているので、レンダリングはされているかと思います。

<Paginate>というコンポーネントに限らず、他のMaterial-UIのコンポーネントであってもこの現象は起きます。

該当のソースコード

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import Pagination from '@material-ui/lab/Pagination';

export default function Home() {

	useEffect(() => {
		console.log("hoge1")
	}, [])
	return (

		<div>
			render
			<Pagination count={10} />
		</div>
	);
}

if (document.getElementById('home')) {
	ReactDOM.render(<Home />, document.getElementById('home'));
}

試したこと

・<Pagination/>コンポーネントを削除→console.log()が実行されました。
・useEffectの第二引数を無くす→変化はありませんでした。

###バージョン等

react@16.14.0
@material-ui/core@4.11.3
@material-ui/lab@4.0.0-alpha.58

maisumakun

2021/06/15 06:12

material-uiやReactのバージョンはいくつでしょうか？

bktclvy

2021/06/15 06:23

バージョン情報を追記いたしました。ご確認いただけますと幸いです。

hoshi-takanori

2021/06/15 07:27

とりあえずそれで動くことは動きましたけど…。どうやって動かしてますか？ (create-react-app で作ったプロジェクトですか？該当のソースコードは index.js ですか？他に JS ファイルがあったりしますか？ index.html に <div id="home"> はありますか？)

bktclvy

2021/06/15 07:39

Laravel Mixという開発環境を使っています。ソースコードはhome.jsです。 app.jsでhome.jsをrequireして使用しています。 htmlに<div id="home"> は存在しています。開発環境に関して詳しくなく的外れなお返事でしたら申し訳ありません。