[Bug] Erro JSX element type 'ReactNode' is not a constructor function for JSX elements. no selectorGroup

Olá Natália.
Vou lhe passar algumas sugestões para resolver seu problema:
O erro que você recebeu indica que o React está tentando renderizar algo que não é um elemento JSX válido, e isso geralmente acontece por duas causas principais:
No seu código, você fez:

<SelectorGroup id="cidade" icon={}>

Aqui o icon está vazio ou seja, o React não sabe o que renderizar.
Se a intenção era passar o ícone do react-icons, o correto seria renderizar o componente do ícone, não a referência da função.
Ou seja:

<SelectorGroup id="cidade" icon={<FaLocationDot />} />

Sempre que você passa um componente React como elemento JSX, ele precisa estar com < /> senão o React vai tratá-lo como uma variável/função, e não como elemento.
Aqui:

{icon &&
{icon}
}
<select className={styles.selector} {...rest}>
  {children}
</select>

Esse trecho está errado sintaticamente dentro de JSX você não pode abrir chaves duas vezes.
O certo é simplesmente inserir o valor de icon, assim:

{icon && icon}

Ou mais limpo:

{icon}

Versão corrigida dos arquivos

headerFormFilters.tsx

import SelectorGroup from "../../selector/selectorGroup";
import SelectorOption from "../../selector/selectorOption";
import { FaLocationDot } from "react-icons/fa6";

const cidades = [
  { id: 1, nome: "São Paulo" },
  { id: 2, nome: "Rio de Janeiro" },
  { id: 3, nome: "Belo Horizonte" },
  { id: 4, nome: "Curitiba" },
  { id: 5, nome: "Porto Alegre" },
];

const HeaderFormFilters = () => {
  return (
    <form>
      <SelectorGroup id="cidade" icon={<FaLocationDot />}>
        {cidades.map((cidade) => (
          <SelectorOption key={cidade.id} value={cidade.nome}>
            {cidade.nome}
          </SelectorOption>
        ))}
      </SelectorGroup>
    </form>
  );
};

export default HeaderFormFilters;

selectorGroup/index.tsx

import React from "react";
import styles from "./selectorGroup.module.css";

interface SelectorGroupProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  icon?: React.ReactNode;
  children: React.ReactNode;
}

const SelectorGroup = ({ icon, children, ...rest }: SelectorGroupProps) => {
  return (
    <div className={styles.container}>
      {icon}
      <select className={styles.selector} {...rest}>
        {children}
      </select>
    </div>
  );
};

export default SelectorGroup;

Analisa o texto acima, faça as modificações, teste o código e envia um feedback.
Fico esperando...
Bons estudos.