[material-ui][Autocomplete] Make multiple selected values available to FormData about material-ui HOT 3 OPEN

import { Autocomplete, Button, TextField } from '@mui/material'
import * as React from 'react'
import { Form, type ActionFunctionArgs } from 'react-router-dom'

const someOptions = [
  { label: 'Option1' },
  { label: 'Option2' },
  { label: 'Option3' },
]

export function AutoCompleteDemo() {
  const [selectedOptions, setSelectedOptions] = React.useState([])

  return (
    <Form method="POST" action="/example">
      <Autocomplete
        options={someOptions}
        getOptionLabel={(option) => option.label}
        multiple
        onChange={(event, value) => setSelectedOptions(value)}
        renderInput={(params) => (
          <TextField
            {...params}
            required
            variant="outlined"
            label="Example"
          />
        )}
      />
      {selectedOptions.map((option, index) => (
        <input
          key={index}
          type="hidden"
          name="example"
          value={option.label}
        />
      ))}
      <Button type="submit">Submit</Button>
    </Form>
  )
}

export async function AutoCompleDemoAction(args: ActionFunctionArgs) {
  const formData = await args.request.formData()
  const selectedValues = formData.getAll('example')
  console.log(selectedValues)
  return true
}