cannot appear as a descendant of 에러

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form> 에러 확인

1. 에러 발생 원인

form 안에 form 이 중복적을 선언 되어 있을때 발생한다.

return (
    <>
      <FormStyled >
        <form onSubmit={onSubmit}>
          <label>작성자 : </label>
          <input onChange={onChange} name="writer" type={'text'} placeholder="작성자" value={writer} />
          <label>title : </label>
          <input onChange={onChange} name="title" type={'text'} placeholder="title" value={title} />
          <CKEditor
            editor={ClassicEditor}
            data={text}
            onReady={editor => {
              // You can store the "editor" and use when it is needed.
              // console.log('Editor is ready to use!', editor);
            }}
            onChange={(event, editor) => {
              const data = editor.getData();
              console.log("data : ", data)
              // console.log({ event, editor, data });
              setFormData((state) => ({
                ...state,
                text: data
              }))
            }}
            onBlur={(event, editor) => {
              console.log('Blur.', editor);
            }}
            onFocus={(event, editor) => {
              console.log('Focus.', editor);
            }}
          />
          <button type='submit'>제출</button>
          <Link to={'/'}>뒤로가기</Link>
        </form>
      </FormStyled>
    </>
  )

 하지만 찿아봐도 form 안에 form 을 선언한 적이 없다. 

그러면 남은것은 <FormStyled> 요놈이다 ! 

import styled from "styled-components";

export const FormStyled = styled.form`
  & > form {
  display: flex;
  flex-direction: column;
  padding: 50px;
  input  {
    margin-bottom: 20px;
    height: 30px;
  }
}
`

styled.form 

여기 부분에서 오류가 발생했던 것이다. 

form 부분을 div 태그로 바꿨더니 정상적으로 오류가 발생하지  않고 잘 작동하는걸 확인 할 수 있었다.