【React】「The mask “__/__/____” you passed is not valid for the format used yyyy/MM/dd.」警告が発生する

Material UI ライブラリの DesktopDatePicker コンポーネントを導入した際に発生したワーニングの対処方法についてです。

メッセージの全文がこちら。

The mask “__/__/____” you passed is not valid for the format used yyyy/MM/dd.
Falling down to uncontrolled no-mask input.

翻訳したところ、「渡されたマスク”__/__/__”は、使用されているフォーマットyyyy/MM/ddに対して有効ではありません。制御不能なノーマスク入力にフォールダウンしています。」とのことでした。

ワーニングメッセージで検索した結果、下記の記事がヒットしました。

Mas warning on console The mask “__/__/____ __:__ _M” you passed is not valid for the format used P p. Falling down to uncontrolled not-masked input. · Issue #1776 · mui/material-ui-pickers
https://github.com/mui/material-ui-pickers/issues/1776

上記は読み取り専用になってしまっている material-ui-pickers ライブラリの Issue ですが、こちらが参考になりました。

修正方法についてですが、mask props を設定したところ解消されました！

import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';

<DesktopDatePicker
  label="日付を選択する"
  inputFormat="yyyy/MM/dd"
  mask="____/__/__"
  value={value}
  onChange={handleChange}
  renderInput={(params) => <TextField {...params} />}
/>

mask はフォーマットからの生成を上書きするために使用することができる props です。
どうやら、inputFormat を設定した場合は、mask も併せて同じ形式を設定する必要があるようです。
上記のように修正した後、ページを再読み込みしたところ、警告メッセージは表示されなくなりました。

以上、React プロジェクトで「The mask “__/__/____” you passed is not valid for the format used yyyy/MM/dd.」警告が発生した時の対処方法についてでした。
ご参考になれば幸いです。