如何将2个数据模型源传递给SearchField

import React, { useState } from 'react';
import SearchField from 'your-search-field-library'; // 替换为你使用的搜索组件库

const MySearchComponent = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [dataModel1, setDataModel1] = useState([]);
  const [dataModel2, setDataModel2] = useState([]);

  // 在这里获取数据模型源并更新状态
  const fetchDataModel1 = () => {
    // 从数据源获取数据模型1的数据
    // 更新dataModel1状态
  };

  const fetchDataModel2 = () => {
    // 从数据源获取数据模型2的数据
    // 更新dataModel2状态
  };

  // 当搜索框的值发生变化时，更新搜索查询并重新获取数据模型源
  const handleSearchChange = (event) => {
    const query = event.target.value;
    setSearchQuery(query);
    fetchDataModel1();
    fetchDataModel2();
  };

  return (
    <div>
      <SearchField
        value={searchQuery}
        onChange={handleSearchChange}
      />
      {/* 在这里使用dataModel1和dataModel2进行搜索结果的展示 */}
    </div>
  );
};

export default MySearchComponent;