Componets tab in react dev tools is not working properly - reactjs

Question

I am new to react and I have just installed the React Dev Tools extension in google chrome.
I realized that the React tab in the inspect bar was replaced by Components and Profiler tabs.
But for some reason, The rendered tree is not complete in the components tab
take a look at the following pictures
This is what my app looks like in the Components tab
This is what I am expecting it to look like
And I don't know why it is showing Anonymous key = 'something' ForwardRef... Instread of showing a component over there
[![enter image description here][3]][3]
As mentioned I have installed the styled-components plugin
[3]: https://i.stack.imgur.com/j2vnd.png

Answer 1

Make sure you are following these:
if you are using default export of components, there is no name for the component for dev tools to use.
try:
const HelloWorld = () => {
return <h1>Hello</h1>;
};
export default HelloWorld; // Now tool has a name to work on.
For HoC, you can use 'displayName' property:
More useful ref: https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools
React dev tools allows you to see the components that are in 'DEV' mode and not running production build.
Update after checking code:
You are using higher order components and as I mentioned earlier/above HoC needs explicit displayName
const PersonWithRadium = Radium(Person);
PersonWithRadium.displayName = "PersonWithRadium";
export default PersonWithRadium;

Answer 2

It seems you are really using Styled Components.
That shows to React Dev tools because you are probably not installing the debugging tools.
npm install --save-dev babel-plugin-styled-components
According to the docs it will show as styled.div if you don't install this which is pretty much similar to your problem.
More info here: https://styled-components.com/docs/tooling#better-debugging