how to prevent iis default not-found page and show a custom reactjs not-found page

Since you mentioned that everything worked fine locally in development mode, there could be something wrong with the settings in IIS. The following steps are worth trying: (1) Open the IIS manager (2) Identify the app you are working on (3) Open “Error Pages” in the home pane (4) Using Add (if you don’t have the 404 status code) or Edit (if you already have a 404 status code) in Actions pane (5) Enter the 404 underneath “Status Code” (6) for the response action, select “Execute a URL on this site” and enter the URL for the custom error page. NOTE: Please make sure that you are using the relative path. In addition, the version of IIS could lead to some difference in practice. If you still have any problems, please feel free to contact us, and more details could help us better solving your case.

make NotFound page and Route code first.

<Route path="/notfound" component={NotFound} />

And then type some redirect code if an error occurs while Main component render.(Main component is just an example)

export const Main = () => {
const history = useHistory();

useEffect(() => {
    if (error) {
       history.push("/notfound")
    }
})

render ....
}

I hope you find a solution!

Btw, React-Router is now v6 you should know it :)