How to connect server and client state

[PetrovaDaria]

I don't know how to solve a task with the usage of react-query. Please help me to find the best approach.

I have a form which has a block where I can select people.
When I first time click "Add people", a modal opens and it fetches a list of available people.
Then I can select some of them and click "Save".
After that I return to form and now it shows all selected people.
Also in modal of people list I have a search bar, with each new value in search bar fetches a new list of people.
But if I at first fetched a list of people with empty search bar, select here one person, then type something in search and fetche new list I still have to have info about selected person from previous list and this person is also shown in Selected tab in modal.

As I see it, client state is ids of selected people and server state is full info about people.
In modal I can use useQuery(["people", { search }], fetchPeople) to fetch people list with different searches.

When I save selected people In modal I get all queries of people list with different search params queryClient.getQueriesData(["people"]). I filter only data about selected people. And manually save in cache by key ["person", id] the full info about person from the list of people so that I can use this info the form. What if I use this modal for more than five minutes and the first fetched list of people expired and removed from the cache. After that I will not be able to get full info about selected person!

In form I have to manually take data about individual people from cache because if I use useQuery I need to provide some fetch function but I don't want to use it here. So react-query doesn't know that I use this person data in ui and after 5 minutes it will clear it and probably it will lead to a disappearance of selected person in form.

So a lot of questions about interaction between server and client state in this case. Really need advice what to do.
Attach pseudocode and pseudoui for more info.

const PeopleModal = () => {
  const queryClient = useQueryClient();
  const [search, setSearch] = useState("");
  const peopleList = useQuery(["people", { search }], fetchPeople);
  // let's imagine that `selectedPeopleIds` and its update function are handles in some client state manager and here I will not define them

  // manually push data about individual persons in cache
  const onSavePeople = () => {
    // get all people queries with different search
    const allPeopleQueries = queryClient.getQueriesData(["people"]);
    const allPeople = allPeopleQueries
     // get the value of query
    .map((peopleQueryArr) => agentQueryArr[1])
    .filter(Boolean)
    .flatMap((a) => a);
    selectedPeopleIds.forEach((id) => {
      const person = allPeople.find((p) => p.identifier === id);
      queryClient.setQueryData(["person", id], person);
    });
  }
  return (
  <>
     <input value={search} onChange={setSearch}/>
     <div>
     <Tab>All</Tab>
     <Tab>Selected</Tab>
     </div>
      {peopleList.data.map(p => <Person p={p} setSelectedPeopleIds={setSelectedPeopleIds}/>}}
     <Button onClick={onSavePeople}>Save</Button>
  </>
  )
}

const PeopleBlockInForm = () => {
// let's imagine that `selectedPeopleIds` and its update function are handles in some client state manager and here I will not define them

  const selectedPeople = useMemo(() => {
    return selectedPeoplesIds.map((id) => {
      return queryClient.getQueryData(["person", id]);
    });
  }, [selectedAgentsIds]);

  return (
    <>
       {selectedPeople.map(p => <Person p={p}/>)
      <Button onClick={openModal}>Add</Button>
    </>
  )
}