Uncaught (in promise) URIError in React

Question

No response when clicking the “edit” buttons after updating the details with symbols. If without symbols, it responded when clicking the “edit” buttons.

I have checked the console. The error messages are shown below:

history.js:93 Uncaught (in promise) URIError: Pathname "/branch-management/edit-branch/?companyName=ABC SDN BHD 1!@#$%^&*&branchName=ABC 1!@#$%^&*(" could not be decoded. This is likely caused by an invalid percent-encoding.

I have found that the problem, because it cannot cater symbol with the URL. Below is my coding:

const selectRow = async (code, companyName, e) => {
    e.preventDefault();
    history.push({
      pathname: `/branch-management/edit-branch/?companyName=${companyName}&branchName=${code}`,
    });
  };

I have tried below coding to solve it, but cannot solve:

const selectRow = async (code, companyName, e) => {
    const encodedCompanyName = encodeURIComponent(companyName);
    const encodedCode = encodeURIComponent(code);
    e.preventDefault();
    history.push({
      pathname: `/branch-management/edit-branch/?companyName=${encodedCompanyName}&branchName=${encodedCode}`,
    });
  };

For encodeURIComponent function:

declare function encodeURIComponent(uriComponent: string | number | boolean): string;

The error messages showed Uncaught URIError: URI malformed.

I hope someone can guide me on how to solve this problem.