@headlessui/react Uncaught Error: Passing props on "Fragment"! 에러 원인

라이브러리 버전 (@headlessui/react)

"@headlessui/react": "^1.7.19",

 

에러메시지

Uncaught Error: Passing props on "Fragment"!

The current component <Tabs /> is rendering a "Fragment".
However we need to passthrough the following props:
  - style
  - ref

You can apply a few solutions:
  - Add an as="..." prop, to ensure that we render an actual element instead of a "Fragment".
  - Render a single element as the child so that we can forward the props onto that element.
    at m (render.js:14:1177)
    at C (render.js:14:310)
    at me (tabs.js:22:5261)
    at renderWithHooks (react-dom.development.js:15486:18)
    at updateForwardRef (react-dom.development.js:19240:20)
    at beginWork (react-dom.development.js:21670:16)
    at beginWork$1 (react-dom.development.js:27460:14)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)
    at renderRootSync (react-dom.development.js:26468:7)

 

 

원인

Tab.Group 태그는 div나 어떤 태그가 아닌 Fragmenet <></>로 그려지게되는데, 

거기에 style을 주려고 했기때문에 발생한 에러이다. 
( @headlessui/react 버전을 올리면 Tab.Group 태그가 div로 그려지기도 한다.)

import {Tab} from '@headlessui/react';



	const [tabIndex, setTabIndex] = useState(0);

	       <Tab.Group
                        // style={{height: '100%'}}
                        onChange={(index) => {
                        setTabIndex(index);
                    }}>
                        <Tab.List className="tab-button-list">
                            <StyledTabButton>
                                {({selected}) => (
                                    <p className={`tab-item ${selected ? 'selected' : ''}`}>
                                        첫번째 탭 버튼
                                    </p>
                                )}
                            </StyledTabButton>
                        </Tab.List>
                        <Tab.Panels className="tab-contents">
                            <Tab.Panel className="tab-content progress">
                                <h5 className="content-header">첫번째 탭 제목</h5>
                                <div className="content-body">
                                   첫번째 탭 내용
                                </div>
                            </Tab.Panel>
                        </Tab.Panels>
                    </Tab.Group>