Имя компонента с перехватчиками React в DevTools

Question

Я только что обновил класс из функционального компонента.

Когда я смотрю в React's DevTools, я обычно вижу свой компонент с именем Gallery со всеми именованными переменными состояния.

Теперь, все, что я вижу, это компонент с именем _default с кучей неописательных State: определений.

Из других ответов я читал, что React Dev Tools теперь поддерживаетперехватывает, но я не видел ни одного примера неправильного имени компонента.

Это нормальное поведение или я что-то не так делаю?

Версии

Реагировать16.9.0

React Developer Tools Расширение Chrome: 4.1.1

Также возникает такая же проблема в Firefox.

Код компонента

// The component
import React, { useState, useEffect } from 'react';

const Gallery = ({ images, layout }) => {
  const [showLightbox, toggleLightbox] = useState(false);
  const [activeImage, setActiveImage] = useState(false);

  return (
    // Some JSX here
  )
};

Код рендеринга

// Rendering the component
import React from 'react';
import { render } from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';

render(
  <Gallery images={images} />,
  document.getElementById('image-gallery'),
);

Скриншот Devtools