FormHelperTextコンポーネントとTypographyコンポーネントの関係性

## 発生した問題
以下のソースコードを実装した際、**hydration error**が発生した。
(ソースコード一部抜粋)
```Typescript
<FormHelperText sx={{ textAlign: "right" }}>
    <Typography fontSize={12}>選択できるのは3つまで</Typography>
</FormHelperText>
```
## 動作環境
```json: package.json
"dependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@fontsource/material-icons": "^5.1.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.9",
    "@mui/material": "^6.1.9",
    "@reduxjs/toolkit": "^2.5.0",
    "@storybook/cli": "^8.4.7",
    "@testing-library/jest-dom": "^6.6.3",
    "konva": "^9.3.18",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.53.2",
    "react-konva": "^19.0.1",
    "react-redux": "^9.2.0",
    "use-image": "^1.1.1",
    "vite-plugin-env-compatible": "^2.0.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/addon-themes": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-perfectionist": "^4.3.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "eslint-plugin-sort-keys": "^2.3.5",
    "eslint-plugin-storybook": "^0.11.1",
    "globals": "^15.12.0",
    "happy-dom": "^15.11.7",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.10",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
    "storybook": "^8.4.7",
    "ts-node": "^10.9.2",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.16.0",
    "vite": "^6.0.1",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^2.1.6"
  },
```
## hydration errorとは？
簡単に言うと、クライアントサイドとサーバーサイドのコンポーネントのビルド時に内容などが相違すると発生するもの、とのこと。
詳細は以下をご確認してみてください↓

https://qiita.com/Yametaro/items/22cde58cd6abf577f1a4#%E3%81%BE%E3%81%A8%E3%82%81

## 試したこと
クライアントサイドのレンダリングを管理して、対象のコンポーネントのレンダリングを制御したが、現状変わらず。
(ソースコード一部抜粋)
```Typescript
const [isClient, setIsClient] = useState<boolean>(false);

useEffect(() => {
    // hydration errorに対応するためクライアントサイドレンダリングを管理する
    setIsClient(true);
}, []);

return (
  {/* 以下クライアントサイドでのみレンダリング */}
  {isClient && (
      <FormHelperText sx={{ textAlign: "right" }}>
        <Typography fontSize={12}>選択できるのは3つまで</Typography>
      </FormHelperText>
  )}
)
```

## 解決方法
どうやら**FormHelperText**コンポーネントと**Typography**コンポーネントを親子関係で使用すると、hydration errorが発生するらしい。
以下のように修正したところ、エラーは解消された。
```typescript
<FormHelperText sx={{ fontSize: "12px", textAlign: "right" }}>
  選択できるのは3つまで
</FormHelperText>
```

## 補足
これは余談だが、文字列表示の管理に便利がTypographyコンポーネントだが、混ぜると危険なことがあるのを初めて知った・・・。⚠️

(2025/01/17追加)
以下の原因で同様のエラーが出るようです。（今回はまさしく該当の内容でした）

https://qiita.com/honey32/items/9bbc4d066cc5d26ff004