Bad URL Request is being made

I am adding pagination and query search into my Ticket List

This is the Ticket List Page Code

  const [query, setQuery] = useState("");

  function handleSearch(e) {
    console.log(e.target.value);
    setQuery(e.target.value);
  }
  useEffect(() => {
    dispatch(getAllTicketsAsync(page, query));
  }, [page, query]);

This is Ticket Slice, I am using Redux Toolkit

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async (page, query) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }

and finally this is API call

export async function getTickets(page, query) {
  const response = await fetch(
    `http://localhost:8080/tickets?_page=${page}&_limit=4&q=${query}`
  );
  const data = await response.json();
  const totalItems = await response.headers.get("X-Total-Count");
  console.log(data);

  return {
    data,
    totalItems: +totalItems,
  };
}

);

I could not see what am i doing wrong here? Query should be empty string when nothing is typed in it then why this is the requested URL – “http://localhost:8080/tickets?_page=1&_limit=4&q=[object%20Object]”