I'm trying to load data into dropbox(Combobox) from an API. Below are 2 React-Select dropdowns but it doesn't display(Show) any data in dropbox. I Also tried to loop through in the if below the let option but got nothing.

I tried Using reast_select Axios but had more errors than before. If I console log I get the data but however, it's just blank.

import React from 'react'
import Select from 'react-select'
import {useEffect,useState} from 'react'
  
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


const ClientDropdown = () => {

  const [clientList,setClientList] = useState([])
  //console.log(clientList)

  useEffect(() => {
    clientData();
  },[])

  const clientData = async() => {
    const response = await fetch("https://localhost:7168/TestData");
    //console.log(response);
    const clientDataJson= await response.json();
    //console.log(clientDataJson);
    setClientList(clientDataJson);
  }

  let option = []
  if (clientList.values.length > 0) {
    clientList.values.forEach(client => {
      let roleDate = {}
      roleDate.value = client.studentid
      roleDate.label = client.sudentName
      option.push(roleDate)
      console.log('Im Here' + roleDate)
    })
  }
 
    return (
    <div>
     <Select options={option} />

     <Select
     {
          ...clientList.map((val) => {
          return (
            <options vlaue={val.studentid} label={val.sudentName}></options> 
          )
        })
      }
    />
    </div>
    )
}
export default ClientDropdown