I am using react-styleguidist to create documentation for my nextjs project. For some convenient reasons, I have multiple exported components in one file.

Project Structure

-components
    - UI
       - Form.tsx
       - Button.tsx
       - Layout.tsx  

For example, I have 3 exported components in my Layout.tsx

// JSDoc For Container
export const Container = ({className, children, ...props}: ContainerProps) => (
<div {...props} classname={classNames("container max-w-7xl mx-auto", className)}>
{children}
</div>
)

// JSDoc for Another Component
export const AnotherComponent = (props) => (
<div>
{/* Component Code */}
</div>
)

// JSDoc for Third Component
export const ThirdComponent = (props) => (
<div>
{/* Component Code */}
</div>
)

I have for example these 3 components in my Layout file, but styleguidist is showing only the Container component and it's related documentation based on JSDocs and Props type

My Styleguidist config

const path = require("path");
const sections = require("./section.js");

module.exports = {
    propsParser: require("react-docgen-typescript").parse,
    resolver: require('react-docgen').resolver
        .findAllExportedComponentDefinitions,
    theme: {
        fontFamily: {
            base: '"Poppins", sans-serif',
            monospace: ["Fira Code"],
        }
    },
  
    contextDependencies: [
        path.resolve(__dirname, "section.js")
    ],
    components: "components/**/*.tsx",
    require: [path.join(__dirname, 'docs/dist/dist.css')],
};

In fact I tried with custom sections from styleguidist docs, still I was able to get only one component instead of all 3.

Note: Keeping every component in different files will make the project handling harder. I want to know if there is any other solution other than keeping each and every component in their respective file