MUI v5のstyled()の位置を間違ってた話

スマホでテストしててなんか入力欄にフォーカスしたときに挙動がおかしい(入力欄をタップしてフォーカスしたときにフォーカスが解除されて、モーダルがすぐに閉じる)なと思っていたらstyledの位置がおかしかったみたいです。
当たり前かもしれないですが、半日潰れました。多分なんかの拍子に再レンダリングされて、モーダルが閉じちゃってたと思います。

↓は例です。ダメなやつ。

Test.jsx

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
const Test = (props) => {
const TestBox = styled(Box)(({ theme }) => ({
  background: '#dce5ec',
  borderRadius: '8px',
}));
	return (
		<TestBox>
		aaa
		</TestBox>
	)
}
export default Test;

↓こっちが正解

Test.jsx

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
+ const TestBox = styled(Box)(({ theme }) => ({
+   background: '#dce5ec',
+   borderRadius: '8px',
+ }));
const Test = (props) => {
- const TestBox = styled(Box)(({ theme }) => ({
-   background: '#dce5ec',
-   borderRadius: '8px',
- }));
	return (
		<TestBox>
		aaa
		</TestBox>
	)
}
export default Test;