Next.js + TypeScript datalist内のoptionには閉じタグが必要

この記事のエラーは以下の環境で発生しました。

"dependencies": {
  "@types/node": "18.11.9",
  "@types/react": "18.0.25",
  "@types/react-dom": "18.0.8",
  "eslint": "8.27.0",
  "eslint-config-next": "13.0.3",
  "next": "13.0.3",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "typescript": "4.8.4"
},

以下のコードを記述すると、datalistタグの所にエラーメッセージが表示されました。
JSX element 'datalist' has no corresponding closing tag.ts(17008)

range.tsx

import React from 'react'
export default function Range() {
  return (
    <>
      <input
        type="range"
        list="range-list"
        />
      <datalist id="range-list">
        <option value="10">
        <option value="20">
      </datalist>
    </>
  )
}

datalistには閉じタグを付けているのにどうしてだろうと悩んだのですが、optionタグに閉じタグを付けると解決しました。

range.tsx

import React from 'react'
export default function Range() {
  return (
    <>
      <input
        type="range"
        list="range-list"
        />
      <datalist id="range-list">
        <option value="10"/>
        <option value="20"/>
      </datalist>
    </>
  )
}

JSXにまだ慣れていないです。公式のdatalistのページからコピペしたのにエラーが出たので、
解決に時間がかかりました。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist