Tailwindcss combine peer-focus-within with not(:peer-placeholder-shown)

I want to create a input field with an clear icon that only shows when the input is focused and the placeholder is not shown. In the project we use tailwindcss latest version in react.
I tried using the not(:) operator but this does not work.

Here is a small example of the problem:

function ExampleInput({
  label,
  className,
  onClear,
  ...props
}: { label: string; onClear: () => void } & ComponentProps<'input'>) {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>
        <span>{label}</span>
        <input
          {...props}
          className={clsx('peer truncate text-lg/6', className)}
          type="text"
          id={id}
        />

        <button
          className="not(:peer-placeholder-shown):peer-focus-within:block absolute bottom-0.5 right-0.5 hidden text-spanishGrey"
          type="button"
        >
          <CloseCrossIcon onClick={onClear} height="14" width="14" />
        </button>
      </label>
    </div>
  );
}

The goal would be that the button is only shown when the placeholder is hidden and the input is focused with only css. Maybe with a custom class or extension of the tailwind theme.

You could consider using an arbitrary peer variant like peer-[:not(:placeholder-shown):focus]. Also note that the <input> needs a non-empty placeholder attribute value for :placeholder-shown to match.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<label>
  <span>{label}</span>
  <input class="peer" type="text" placeholder="foo" />
  <button class="hidden peer-[:not(:placeholder-shown):focus]:block">
    CloseCrossIcon
  </button>
</label>

<!-- end snippet -->