我的问题是我想设置值 我在选择视图的表角色（admin和users）中拥有的，以及当选择某个值时，通过控制台获取该值

import {
  useState
} from "react";
import {
  useNavigate
} from "react-router-dom";
import axios from 'axios';

const Register = (props) => {
  let history = useNavigate();
  //guardamos los valores de registro del usuario nuevo
  const [data, setData] = useState({
    nombreUsuario: "",
    apellidosUsuario: "",
    roles: "",
    emailUsuario: "",
    passwordUsuario: ""

  })

  const handleChange = (e) => {
    setData({ ...data,
      [e.target.name]: e.target.value
    });
    console.log(data)
  }

  const submitForm = (e) => {
    e.preventDefault();
    const sendData = {
      nombreUsuario: data.nombreUsuario,
      apellidosUsuario: data.apellidosUsuario,
      roles: data.roles.value,
      emailUsuario: data.emailUsuario,
      passwordUsuario: data.passwordUsuario

    }
    console.log(sendData);

    // axios.post('http://localhost/Repositorio/DEW/practicas_react/backend/index.php', sendData)
    //     .then(response => {
    //         //hacemos una condicion para saber si el usuario es correcto o no es correcto
    //         response.data.Status === 'Invalid' ? alert("Usuario Invalido") : history('/Login');
    //     })
  }
  return ( <
    div className = "mx-auto w-50" >
    <
    form data - bitwarden - watching = "1"
    onSubmit = {
      submitForm
    } >
    <
    img className = "mb-4"
    src = "/docs/5.2/assets/brand/bootstrap-logo.svg"
    alt = "imagen de registro"
    width = "72"
    height = "57" / >
    <
    div className = "d-flex gap-2 justify-content-between bg-primary rounded-1 py-2 px-2" >
    <
    h1 className = "h3 mb-3 fw-normal text-center text-white" > Registrar usuario nuevo < /h1> <
    svg xmlns = "http://www.w3.org/2000/svg"
    width = "40"
    height = "40"
    fill = "white"
    className = "bi bi-person-add "
    viewBox = "0 0 16 16" >
    <
    path d = "M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" / >
    <
    path d = "M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" / >
    <
    /svg> < /
    div > <
    div className = "form-floating my-2" >
    <
    input type = "text"
    name = "nombreUsuario"
    className = "form-control"
    onChange = {
      handleChange
    }
    value = {
      data.nombreUsuario
    }
    /> <
    label
    for = "floatingInput" > Nombre < /label> < /
    div >

    <
    div className = "form-floating my-2" >
    <
    input type = "text"
    name = "apellidosUsuario"
    className = "form-control"
    onChange = {
      handleChange
    }
    value = {
      data.apellidosUsuario
    }
    /> <
    label
    for = "floatingInput" > Apellidos < /label> < /
    div >

    <
    div className = "form-group" >
    <
    label className = "mb-2" >
    <
    svg xmlns = "http://www.w3.org/2000/svg"
    width = "20"
    height = "20"
    fill = "currentColor"
    className = "bi bi-person-gear me-2"
    viewBox = "0 0 16 16" >
    <
    path d = "M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" / >
    <
    /svg>
    Rol del usuario < /label> <
    select name = "roles"
    className = "form-select" >
    <
    option selected > Opcion de rol de usuario < /option> <
    option value = "1" > One < /option> < /
    select > <
    /div>

    <
    div className = "form-floating my-2" >
    <
    input type = "email"
    name = "emailUsuario"
    className = "form-control"
    onChange = {
      handleChange
    }
    value = {
      data.emailUsuario
    }
    /> <
    label
    for = "floatingInput" > Email < /label> < /
    div >

    <
    div className = "form-floating my-2" >
    <
    input type = "password"
    name = "passwordUsuario"
    className = "form-control"
    onChange = {
      handleChange
    }
    value = {
      data.passwordUsuario
    }
    /> <
    label
    for = "floatingPassword" > Contraseña < /label> < /
    div > <
    button className = "w-100 btn btn-lg btn-primary"
    type = "submit" > Registrar usuario < /button> < /
    form > <
    /div>
  )
}
export default Register;

正如我所看到的，所选值未显示，我如何显示它？
我得到的值 输入，但选择显示为空
values of input