React Hook Form & React Select

BasicReactSelect.tsx

"use client"
import { useEffect, useState } from "react";
import Select from "react-select";

export default function CreateOrderForm() {

    const [flavors, setFlavors] = useState([]);

    useEffect(() => {
        console.log(flavors)
    }, [flavors])

    const selectFalvor = flavors => {
        setFlavors(flavors)
    }

    const options = [
        { id: 'chocolate', name: 'Chocolate' },
        { id: 'strawberry', name: 'Strawberry' },
        { id: 'vanilla', name: 'Vanilla' }
    ]

    return (
        <Select 
            options={options}
            isMulti
            onChange={option => selectFalvor(option)}
            getOptionValue={(options) => options.id}
            getOptionLabel={(options) => options.name}
            placeholder="Select a flavor"
            noOptionsMessage={() => "No flavors found"}
        />
    )
}