React/react-router-dom how to pass data through a link

Question

In my react e-commerce store I am trying to figure out how to pass state from one component to another through a react-router-dom link. In my navbar I have a search bar and submit button and when the submit button is clicked it redirects to the products screen where each product is rendered. I have a useState in my navbar to retrieve the search query from the search bar but I don't know how to send this state through with the button.

<form className="navSearch">
                <input 
                    className="navInput" 
                    type="text" 
                    placeholder="Search for games"
                    onChange={event => setQuery(event.target.value)}
                />

                <Link style={{textDecoration: 'none'}} to="/products">
                <button
                    type="submit"
                    className="navButton"
                > Search
                </button>
                </Link>
            </form>

Here is my form in the navbar component, the navInput updates the useState query with setQuery and I would like to pass this information through the button when it redirects, so in the products screen I can filter the products by the search query before I render them.