what are the best practices to use the BOM APIs in React component

The rules of react mentioned that a component and hook must be pure, which means it will render the same content with the same(props, state and context).
Then what about the BOM APIs, for example, location, what if I want to render different things based on the querystring

const Hello = () => {
  const name = new URLSearchParams(location.search).get('name');
  return <div>hello, {name}</div>
}

Is this a pure component? if not, how to make it pure?