Best patterns for initializing form data from a query

const query = useItemsQuery();
const [selectedItem, setSelectedItem] = useState<Item | null>(null);

function handlePickItemToEdit(item) {
  setSelectedItem(item);
}

function handleSubmit() {
  itemMutation.mutate(selectedItem, {
    onSuccess() {
      setSelecteditem(null);
    }
  });
}

if (selectedItem) {
  return <ItemForm item={selectedItem} onSubmit={handleSubmit} />
}
// else display the list of items to pick one to edit

const {id} = useParams();
const serverItem = useItemQuery(id).data;
const [item, setItem] = useState<Item | null>(null);

useEffect(() => {
  setItem(prev => prev ? prev : serverItem);
}, [serverItem]);
// ^ I hate doing stuff like this, seems super jank