Component name with React hooks in DevTools

I've just updated a from a class based to a functional component.

When I look in React's DevTools, I'd usually see my component named Gallery with all the named state variables.

Now though, All I see is a component named _default with a bunch of non-descriptive State: definitions.

From other answers, I've read that React Dev Tools now supports hooks but I've not seen any examples of the component name being wrong.

Is this normal behaviour or is there something I'm doing wrong?

Versions

React 16.9.0

React Developer Tools Chrome extension: 4.1.1

Also getting the same issue in Firefox.

Component code

// 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
  )
};

Render code

// 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 screenshot

Dev Tools screenshot

How do you get the React component name?

To get a component's name in React, we can use the displayName property. to set the Foo. displayName property to the name we want. Then we can retrieve it in the code and the React developer tools.

How do I show components in dev tools?

Open the console by either right-clicking and inspecting an element or by opening the toolbar by clicking View > Developer > JavaScript console. The Components tab will show the current React component tree, along with any props, state, or context.

Can I use hooks in React component?

You can't use Hooks inside a class component, but you can definitely mix classes and function components with Hooks in a single tree.

Can I call hooks outside component?

You can not use hooks outside a component function, it is simply how they work. But, you can make a composition of hooks. React relies on an amount and order of how hooks appear in the component function.

Try adding a displayName to your component before export. Check the following link for reference. DisplayName

Use it like Gallery.displayName = 'Gallery'

Component name with React hooks in DevTools