issue: emotion jsx covered by emotion

emotion-js/emotion#1404
https://emotion.sh/docs/css-prop#gotchas

src/components/ui/Form/InputLayout/InputLayoutContext.ts

@@ -1,12 +1,12 @@
 import { createContext } from 'react'
 
 export interface InputLayoutContextValues {
-  isValid: boolean,
-  isError: boolean,
+  isValid?: boolean,
+  error?: string,
 }
 
 const InputLayoutContext = createContext<InputLayoutContextValues>({
   isValid: false,
-  isError: false,
+  error: '',
 })
 export default InputLayoutContext

src/components/ui/Form/InputLayout/index.tsx

@@ -1,6 +1,5 @@
 import type { InputLayoutContextValues } from './InputLayoutContext';
 import type { ReactNode } from 'react';
-import { cloneElement } from 'react';
 import InputLayoutContext from './InputLayoutContext';
 import InputError from './atom/InputError';
 import InputLabel from './atom/InputLabel';
@@ -9,29 +8,15 @@ import InputPostfix from './atom/InputPostfix';
 import InputPrefix from './atom/InputPrefix';
 import InputShell from './atom/InputShell';
 import InputTag from './atom/InputTag';
-import { getFilteredElement } from './utils/getFilteredElement';
 
 interface InputLayoutProps {
   children: ReactNode
 }
 const InputLayout = ({ children, className, ...props }: InputLayoutProps & CssProps & InputLayoutContextValues) => {
-  const errorElements = getFilteredElement(children, InputError)
-  const labelElements = getFilteredElement(children, InputLabel)
-  const outlineElement = getFilteredElement(children, InputOutline)
-  const postfixElement = getFilteredElement(children, InputPostfix)
-  const prefixElement = getFilteredElement(children, InputPrefix)
-  const shellElement = getFilteredElement(children, InputShell)
-  const inputElement = getFilteredElement(children, InputTag)
 
-  const displayShellElement = cloneElement(
-    shellElement[0] || <div />,
-    [prefixElement, inputElement, postfixElement, labelElements, outlineElement].flat().filter(Boolean)
-  )
-  console.log(shellElement)
   return <InputLayoutContext.Provider value={props}>
     <div className={className}>
-      {displayShellElement}
-      {errorElements}
+      {children}
     </div>
   </InputLayoutContext.Provider>
 }