styled-components - Доступ к реквизитам при определении компонента

Question

Я пытаюсь найти способ доступа к реквизитам в момент определения компонента, чтобы я мог дать базовому компоненту динамическое, определяемое отображаемое имя (для ясности в инструментах разработчика в браузере и реагировании)

Для справки это:

export default styled("div").withConfig({
  displayName: "test",
})(def, base, compose(space, layout, typography, color, flexbox));

Отрендерит это: <div class="test-ljprX fnCjCk"></div>

Я пробую что-то вроде этого

export default styled("div").withConfig({
  displayName: (props) => props.displayName,
})(def, base, compose(space, layout, typography, color, flexbox)); //< (css and styled-system)

Но это делает <div class="sc-bdnylx cPfcvX"></div>
Никаких заметных отличий от компонента и журналов ошибок не обнаружено.

С props.displayName из "Container" например, желаемый результат был бы примерно таким:
<div class="Container-ljprX fnCjCk"></div>

Но я не могу понять, как получить доступ к props на данном этапе определения компонента.

Есть идеи, как я могу добиться этого?

ОБНОВИТЬ

---

Добавление

Test.displayName = "Container";сделал отображение имени компонента в инструментах разработки React, по крайней мере, что приемлемо. Было бы здорово, если бы класс тоже показывал.

Вот так

import Foo from "./Foo"; //the base component described earlier

const styles = css`
  display: flex;
  padding: 2rem;
`;
const Test = ({ children, ...props }) => {
  return (
    <Foo css={styles} {...props}>
      {children}
    </Foo>
  );
};

Test.displayName = "Container";

export default Test;