이렇게 하면 좀 괜찮은건가? props type

import { tw } from 'twind';

const data = {
  title: `Data Based`,
  scripts: [
    `30여 개의 파트너사와의 협업 경험 및 자체 브랜드 수출 등`,
    `5년간의 데이터를 토대로 최적의 판매 방법을 제안합니다.`,
  ],
};
interface Data {
  datas: {
    title: string;
    scripts: string[];
  };
}
// const ContentFact = ({ datas }: { data: { title: string; scripts: [string] } }) => {
// const ContentFact = ({ datas }: { datas: Data }) => {
const ContentFact = ({ datas: { title, scripts } }: Data) => (
    <div>
      <h3>{title}</h3>
      {scripts.map((script) => (
        <p key={script}>{script}</p>
      ))}
    </div>
  );
const VideoCardLayout = ({ article }: { article: { title?: string } }) => {
  const { title } = article;
  return (
    <div className={tw(`flex flex-col md:flex-row`)}>
      <video
        className={tw(`
       w-5/12 h-full object-cover
     `)}
        autoPlay
        loop
        muted
      >
        <source src="/videos/CellPhone.mp4" type="video/mp4" />
        앗! 브라우저가 동영상 플레이를 지원하지 않아요, 다른 브라우저를 사용해주세요 😿
      </video>
      <div className={tw(`w-5/12 h-full text-center mt-0 mb-5 bg-white text-grey-100 grid place-content-center `)}>
        {/* <div>
          <h3>Data Based</h3>
          <p>30여 개의 파트너사와의 협업 경험 및 자체 브랜드 수출 등</p>
          <p>5년간의 데이터를 토대로 최적의 판매 방법을 제안합니다.</p>
        </div> */}
        <ContentFact datas={data} />
      </div>
    </div>
  );
};
export default VideoCardLayout;