Select dependendent on each others reactjs

On selecting first dropdown then the second dropdown should show corresponding phonenumber in second dropdownlist and vice versa .how can we achieve it?

Code

    import Select from "react-select";
 
    const data = [
      { value: 1, label: "max", phone: "123" },
      { value: 2, label: "sam", phone: "345" },
      { value: 3, label: "denis", phone: "4444" }
    ];
    export default function App(props) {
      const [select1, setSelect1] = useState([]);
      const [select2, setSelect2] = useState([]);
    const filter1=data.filter((x)=>{return x.value===select2.value})
    const filter2=data.filter((x)=>{return x.value===select1.value}) 
    return (
        <div className="App">
          <Select
            options={data}
            value={select1}
            onChange={(e) => {
             console.log(e);
              setSelect1(e);
              setSelect2(e.phone);
            }}
          />
          <Select
            options={data}
            value={select2}
            onChange={(e) => {
             
              setSelect2(e);
              setSelect1(e.value);
            }}
          />
        </div>
      );
    }