[React] Objects are not valid as a React child

props로 넘겨주는 데이터와 받는 데이터의 타입이 다를때 발생

import React, { useState } from "react";
import DataList from "./dataList";
 
interface todoList {
  data: string;
}
 
const TodoList = () => {
  const [data, setData] = useState({
    data: "",
  });
 
  const onClick = () => {
    setData({
      data: "test",
    });
  };
 
  return (
    <div>
      <input />
      <button>등록</button>
      <DataList data="test" />
    </div>
  );
};
 
export default TodoList;

위 코드에서 DataList 컴포넌트에 props로 data 값을 전달

import React from "react";
 
interface dataType {
  data: string;
}
 
const dataList = (data: dataType): any => {
  return <div>{data.data}</div>;
};
 
export default dataList;
 

전달받은 data값을 처음엔 data로만 받았더니 에러

data.data로 받으니 정상 동작