In the example component `ProductsPage`, we integrate `useSearchParams` to manage query parameters. 

```js
import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);
  const [searchParams, setSearchParams] = useSearchParams();

  // Function to update the displayed `companies` based on query parameters
  const updateCompanies = (params) => {
    const filteredCompanies = data.filter((item) => {
      const { companyName } = item;
      if (params.get("name")) {
        return companyName.toLowerCase().includes(params.get("name"));
      }
      return true;
    });
    setCompanies(filteredCompanies);
  };

  useEffect(() => {
    // When the component mounts or query parameters change, update the displayed `companies`
    updateCompanies(searchParams);
  }, [searchParams, data]);

  // Function to update query parameters based on user input
  const handleChange = (e) => {
    const newName = e.target.value;
    setSearchParams({ name: newName });
  };

  return (
    <>
      <input
        type="text"
        value={searchParams.get("name") || ""}
        onChange={handleChange}
      />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};
```

Here's a breakdown of the code:
1. We import the necessary dependencies: `useState`, `useEffect`, and `useSearchParams` from React Router;
2. We initialize the state inside the component using `useState`. The `companies` state holds the data to be displayed, and we use the `setCompanies` function to update it;
3. We create a function `updateCompanies` to filter the data based on query parameters. The function takes the current query parameters as a `URLSearchParams` instance and uses them to filter the `data`. In this case, it filters by the "name" parameter;
4. We use the `useEffect` hook to run the `updateCompanies` function when the component mounts and whenever the query parameters change. This ensures that the displayed data is kept in sync with the URL;
5. The `handleChange` function updates the "name" query parameter in response to user input. When the input field changes, it calls `setSearchParams` with the new parameter value;
6. In the component's return statement, we render an input field for user input and a list of companies based on the filtered data.

This code demonstrates how to integrate `useSearchParams` and React Router to create a dynamic web application that responds to changes in query parameters. 

Delve into the world of routing within React applications and learn how React Router streamlines the management of navigation, URL state, and dynamic component rendering, all in response to the current URL.

Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.

Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.

Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.

React Router

Integrating useSearchParams Hook