React-Selectを用いて、選択した値を指定の要素に表示させる

実現したいこと

React-Selectで作成したセレクト要素にチェックを入れた内容を、指定の要素に表示させる。

前提

React,TypeScriptで「React-Select」モジュールを使用しております。
チェックボックスにチェックを入れた時、
チェックに紐づくlabelを、指定の要素に表示させたいと思っています。

発生している問題・エラーメッセージ

TypeError: Cannot read properties of undefined (reading 'value')

該当のソースコード

typescript

1import React,{ useState } from 'react';2import Select,{ OptionProps } from 'react-select';3 4interface Option {5 value: number;6 label: string;7}8 9const options: Option[] = [10 {value: 1, label: "aaa"},11 {value: 2, label: "bbb"},12 {value: 3, label: "ccc"},13 {value: 4, label: "ddd"},14 {value: 5, label: "eee"},15]16 17function MyOption(props: OptionProps<Option>){18 return(19 <div>20 <input 21 type="checkbox"22 id={props.data.value.toString()}23 onChange={(e) => props.selectOption(props.data)}24 checked={props.isSelected}25 />26 <label 27 htmlFor={props.data.value.toString()}28 >29 {props.data.label}30 </label>31 </div>32 )33}34 35function DropDwon(){36 const [value, setValue] = useState('default');37 38// 以下の記述でエラーが発生してしまいます39 const SelectChange = (event:any) => {40 setValue(event.target.value);41 }42 43 return(44 <div className="dropdown__box">45 <Select46 options={options}47 isMulti={true}48 components={{Option: MyOption}}49 hideSelectedOptions={false}50 closeMenuOnSelect={false}51 onChange={52 SelectChange53 }54 />55 56 <p>{value}</p>57 </div>58 )59}60 61export default DropDwon;

試したこと

any型に問題があるのかと思い、「event: React.ChangeEvent<HTMLSelectElement>」という型を使用しましたが、React-Selectで生成される<Select />とは互換性がないようで弾かれてしまいました…。

補足情報（FW/ツールのバージョンなど）

node:v18.12.1
npm:8.19.2