I am new to react/nextjs and im getting the error "Cannot read properties of undefined (reading 'value')". I have tried a few different things, like using select as just a html tag, I have searched the react-select document, but can not find anything that helps with this issue.

Here is my code:

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