How to properly format bytes32 in javascript to send to contract?

I am trying to use the keccak256 function to recover a signed address (basically implementing a whitelisting functionaltiy for an NFT project).

The problem that I am having is that I can not figure out what the proper format of bytes32 for the hash is.

Here is what I am doing so far:

const signerPrivateKey = "someprivatekey"
const signer = new ethers.Wallet(signerPrivateKey);
const hashedAddress = ethers.utils.id(potentialWhiteListAddress);
const hashedAddressBytes = ethers.utils.arrayify(hashedAddress);
const signedAddress = await signer.signMessage(hashedAddressBytes);

return { signedAddress, hashedAddressBytes };

Then when interacting with my contract, the function that I am trying to use is:

function recoverSigner(bytes32 hash, bytes memory signature) public pure returns (address) {
  bytes32 messageDigest = keccak256(abi.encodePacked("x19Ethereum Signed Message:n32", hash));

  return ECDSA.recover(messageDigest, signature);
}

Calling the contract function from the frontend:

await myContract.recoverSigner(hashedAddressBytes, signedAddress);

However, I keep getting the error:

Error: invalid arrayify value (argument="value", value={"0":219,"1":46,"2":197,"3":32,"4":105,
"5":203,"6":166,"7":93, ... "31":52}, 
code=INVALID_ARGUMENT, version=bytes/5.6.1)

I have also tried formating each of these integer values, with ethers.utils.formatBytes32String(...), which resulted in the same error, just with the formatted values:

Error: invalid arrayify value (argument="value", value= 
{"0":"0x3231390000000000000000000000000000000000000000000000000000000000",
"1":"0x3436000000000000000000000000000000000000000000000000000000000000",
"2":"0x3139370000000000000000000000000000000000000000000000000000000000",
"3":"0x3332000000000000000000000000000000000000000000000000000000000000", 
..."31":"0x3532000000000000000000000000000000000000000000000000000000000000"}, 
code=INVALID_ARGUMENT, version=bytes/5.6.1)