컴포넌트 안에 컴포넌트 생성해서 쓸때 input state 변경

input state를 만들어서 변경해서 값을 받아와서 사용하고 있습니다.
return  부분을 컴포넌트로 만들어서 보여주고 싶은데, 동작이 달라집니다. 
return 부분에 직접 input을 만들어서 사용하면 정상적으로 동작하는데,
컴포넌트로 만들어서 쓰면 input창 안에서 변경될때마다 커서가 초기화?됩니다.

1. 이유가 뭘까요?
2. 올바른 사용법은 뭘까요?

const Rename = () => {
const [inputText, setInputText] = useState("");

  const handleChange = (e) => {
    setInputText(e.target.value);
  };
 return (
  <label htmlFor="changeName" className="mb10 dpb">
          변경할 컬럼명
        </label>
        <input
          type="text"
          id="changeName"
          value={inputText}
          onChange={handleChange}
        ></input>
)
}

const Rename = () => {

const [inputText, setInputText] = useState("");

  const handleChange = (e) => {
    setInputText(e.target.value);
  };

const InputTest = () => { 
return ( 
<> 
        <label htmlFor="changeName" className="mb10 dpb">
          변경할 컬럼명
        </label>
        <input
          type="text"
          id="changeName"
          value={inputText}
          onChange={handleChange}
        ></input>
</>

)
}
return (
 <InputTest />
)
}