react-modern-drawerにてWarning: Prop `id` did not match. Serverが出た時の解決法

こんにちは。エンジニア歴７ヶ月目に突入のざまです。
今回は、reactライブラリのreact-modern-drawerを使ったときに出たエラーがググっても出なかったので
自分のメモがてら、誰かのお役に立てたらと思います。

それにしても、gitstarが少ないライブラリを使うと、情報量が少なすぎて困る。。。まぁ、当たり前の話だけども。

該当コード（一部分のみ）

//Nav.tsx

const MobileNav: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDrawer = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <>
      <Drawer
        open={isOpen}
        onClose={toggleDrawer}
        direction="left"
        className="rounded-l rounded-lg"
        size={220}    
      >
        ...
      </Drawer>
    </>
  );
};

これだと
Prop id did not match. Server: "EZDrawercheckbox4wihy" Client: "EZDrawercheckboxfz2na"って出る。
クライアントサイドとサーバーサイドのidが一致しないみたいです。

react-modern-drawerの中身を見たり、色々、辿っていったら
ドキュメントのAPIに「customIdSuffix」というものがあった。
これを付けたらエラーが消えました。

完成コード（一部分のみ）

//Nav.tsx

const MobileNav: FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDrawer = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <>
      <Drawer
        open={isOpen}
        onClose={toggleDrawer}
        direction="left"
        className="rounded-l rounded-lg"
        size={220} 
        customIdSuffix="customId"        // 追加     
      >
        ...
      </Drawer>
    </>
  );
};

react-modern-drawerは便利で使いやすいので、もうちょっと使う人が増えて情報量が増えたら嬉しいです！