Infinite scroll with React Hooks (setState)

Question

The React app I am doing is to practice fetch from Github's API with React Hooks.

Code: https://codesandbox.io/s/lingering-sea-2cdkng

When scrolling to the bottom of the page, I use useState to add more items.

setRepos((prevState) => (prevState ? [...prevState, ...json] : json));

To avoid duplicate fetch, I also use useRef to pass page numbers.

Questions

1. The app called Github api twice upon fetching the repos next page. Then, there are duplicate repos in the list. How to avoid this?
2. When clicking Repos Type, Sort, and Direction radios inputs, the list didn't reset to the first page.
3. The app didn't fetch items in Windows 10 & Chrome 100. What happened?

Thank you!