How can I navigate to a path with percentage sign in react-router?

Question

I am trying to navigate to a page which may contain a percentage (%) sign in the url. e.g "www.domain.com/edit/name%"

if (some condition is met then redirect) {
  let encodedString = encodeURIComponent(this.state.identifier);

  console.log(encodedString);

  return <Redirect push to={`/edit/${encodedString}`} />
}

and in the component we redirected to:

if (params && params.identifier) {
  this.setState({
    identifier: decodeURI(params.identifier)
  });
}

From the console.log(); I can clearly see that encodedString provided that this.state.identifier is name% is name%25. However, when the condition for redirecting is met, I immediately get this error URIError: Pathname "/edit/name%" could not be decoded. This is likely caused by an invalid percent-encoding.

Is there a way for me to redirect to the uri in the case that the /:identifier has a percentage sign?