What is the right way to do on click SSE query that feeds multiple components

// APIClinet.ts
// I would like this to be reusable, if possible
export const sseQuery = (id: string, filter: string, onMessage: (msg: SSEMessage) => void) => {
// I could use useQuery with skipToken, but then I have to make id and filter as (string | undefined)?
// I don't really like this, as both are required for the query

// alternatively, useMutation, but then I have to pass my own AbortController/Signal and handle everything around it?

// is there another way I am not seeing?
}

// Page.tsx
const MyPage = (): JSX.Element => {
  const [id, setID] = useState<string>()
  const [filter, setFilter] = useState<string>()
  const [data, setData] = useState<Array<SSEMessage>>([])
  const onMessage = (msg: SSEMessage) => setData([...data, msg])
  // how do I handle that id and filter is not set initially?
  // There are no default values that would work
  const query = APIClient.sseQuery(...)

  return (
    <>
      <IDSelector onSelect={setID} />
      <Button onClick={setFilterValueAndFireOffTheQuerySomehow()} />
      <Button onClick={queryClient.cancelQuery(...)} />
      {(query.isFetching || query.isSuccess) && <ComponentA data={data} />}
      {(query.isFetching || query.isSuccess) && <ComponentB data={data} />}
    </>
  )
}

// APIClinet.ts
// I would like this to be reusable, if possible
export const sseQuery = (id: string, filter: string, onMessage: (msg: SSEMessage) => void) => {
// I could use useQuery with skipToken, but then I have to make id and filter as (string | undefined)?
// I don't really like this, as both are required for the query

// alternatively, useMutation, but then I have to pass my own AbortController/Signal and handle everything around it?

// is there another way I am not seeing?
}

// Page.tsx
const MyPage = (): JSX.Element => {
  const [id, setID] = useState<string>()
  const [filter, setFilter] = useState<string>()
  const [data, setData] = useState<Array<SSEMessage>>([])
  const onMessage = (msg: SSEMessage) => setData([...data, msg])
  // how do I handle that id and filter is not set initially?
  // There are no default values that would work
  const query = APIClient.sseQuery(...)

  return (
    <>
      <IDSelector onSelect={setID} />
      <Button onClick={setFilterValueAndFireOffTheQuerySomehow()} />
      <Button onClick={queryClient.cancelQuery(...)} />
      {(query.isFetching || query.isSuccess) && <ComponentA data={data} />}
      {(query.isFetching || query.isSuccess) && <ComponentB data={data} />}
    </>
  )
}