Error:

Error: db error: ERROR: bind message supplies 1 parameters, but prepared statement "" requires 0

Situation:
When I render my page with the following code, there are no errors, and the response from the database will return an entry as expected:

import { sql } from "@vercel/postgres";

const ProjectPage = async ({ params }: { params: { id: string } }) => {
  const data = (await sql`SELECT * FROM projects WHERE id = 'dictater'`).rows[0];

  return (
    <div>
      <h1>Portfolio Item: {params.id}</h1>
      <div>ID: {data.id}</div>
    </div>
  );
};

export default ProjectPage;

But, when I attempt to add a dynamic string within the sql command like so, the error will occur:

import { sql } from "@vercel/postgres";

const ProjectPage = async ({ params }: { params: { id: string } }) => {
  const DICTATER = 'dictater';
  const data = (await sql`SELECT * FROM projects WHERE id = '${DICTATER}'`).rows[0];

  return (
    <div>
      <h1>Portfolio Item: {params.id}</h1>
      <div>ID: {data.id}</div>
    </div>
  );
};

export default ProjectPage;

I am not sure what I am doing wrong, and it looks like from the docs that this should be possible:
https://vercel.com/docs/storage/vercel-postgres/sdk#sql

I believe it could be a bug, which is why I tagged it as one, but I would love to be corrected so that I can progress. Thank you!