Soy nuevo en reaccionar/nextjs y recibo el error "No se pueden leer las propiedades de undefined (leyendo 'valor')". He intentado algunas cosas diferentes, como usar select como solo una etiqueta html, he buscado en el documento react-select, pero no puedo encontrar nada que ayude con este problema.

Aquí está mi código:

 import { useState } from 'react'; import Select from 'react-select'; import styles from '../src/styles/Flex.module.scss' const FlexSidebarContainer = ({ sidebarProps }) => { const options = sidebarProps.options const [value, setValue] = useState("") const handleOptionChange = (e) => { let value = e.target.value setValue({ value }) } return ( <form className={styles.form}> {options.map((option, index) => { return ( <div key={index} className={styles.form_item}> <div className={styles.form_label_wrap}> <Select className={styles.form_item_wrap} onChange={handleOptionChange} options={option.items.map(item => ({ value: item.value, label: item.item }) )} defaultValue={option.items.map(item => ({ label: item.item }) )} instanceId={option.items.map(item => ({ instanceId: item.item }) )} /> </div> </div> ); })} </form> ) } export default FlexSidebarContainer