如何将ComboBox的项绑定到另一个列表的项的属性？

const data = [
  { name: 'Item 1', value: 'Value 1' },
  { name: 'Item 2', value: 'Value 2' },
  { name: 'Item 3', value: 'Value 3' },
];

<select>
  {data.map(item => (
    <option key={item.name} value={item.value}>{item.name}</option>
  ))}
</select>

<ul>
  {data.map(item => (
    <li key={item.name}>{item.value}</li>
  ))}
</ul>

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: '',
    };
  }

  handleChange(event) {
    this.setState({ selectedValue: event.target.value });
  }

  render() {
    const filteredData = data.filter(item => item.value === this.state.selectedValue);

    return (
      <div>
        <select value={this.state.selectedValue} onChange={this.handleChange.bind(this)}>
          {data.map(item => (
            <option key={item.name} value={item.value}>{item.name}</option>
          ))}
        </select>

        <ul>
          {filteredData.map(item => (
            <li key={item.name}>{item.value}</li>
          ))}
        </ul>
      </div>
    );
  }
}