Select Component display wrong option after the option List related to it being changed

[YuAnWu0000]

Here is my demo code for the issue:

import { Select, Option, Button } from '@material-tailwind/react'
import { useState } from 'react'

const Test = () => {
  const [val, setVal] = useState('option1')
  const [options, setOptions] = useState(['option1', 'option2', 'option3'])

  const changeOptions = () => {
    setOptions(['option2', 'option3'])
  }
  return (
    <>
      <Select
        label="test"
        variant="outlined"
        size="lg"
        value={val}
        onChange={(val) => setVal(val)}
      >
        {options.map((opt, index) => (
          <Option key={`opt${index}`} value={opt}>
            {opt}
          </Option>
        ))}
      </Select>
      <Button variant="filled" onClick={changeOptions} className="h-12 ml-2">
        Click me
      </Button>
    </>
  )
}
export default Test

I simply deleted option1 in the list after button clicked. Seems like Select component is not mapping the Option with the value but index now.

Can take a look at my demo video:
https://github.com/creativetimofficial/material-tailwind/assets/31946145/3e4f525e-ef75-493d-ab79-7631d3ed6b75