Передача Typed useState Hook дочернему компоненту, читающемуся как undefined, даже если defaultState не является undefined

У меня есть следующий фрагмент кода, который является фрагментом всего этого. В основном я пытаюсь создать форму с возможностью создания нескольких записей одной и той же формы одним нажатием кнопки. Цель состоит в том, чтобы хранить данные в массиве объектов, где каждый объект представляет одну форму.

Родительский компонент

export interface IExperience {
    position: string,
    location: string, 
    startDate: string,
    endDate: string,
    description: string
}

const Experience = () => {
    let [preview,setPreview] = useState(false)
    let [data,setData] = useState<IExperience[]>([{position: '', location: '', startDate: '', endDate: '', description: ''}]) // Default state is not undefined
    let [button,setButton] = useState('Edit')

    return (
        <div className = {styles.visitorContainer}>
            <Nav />
            {preview ? <Message setPreview = {setPreview} data = {data} setData = {setData} /> : <Preview setPreview = {setPreview} data = {data} setData = {setData} button = {button} setButton = {setButton}/>}
            <Foot />
        </div>
    )
}
 
export default Experience

Игнорируйте часть предварительного просмотра, поскольку она избыточна для проблемы, с которой я сталкиваюсь.

Дочерний компонент

import React from 'react'
import { ReactNode, useState } from 'react'
import { IExperience } from '.'
import { Preview } from './preview'

export const Message = ( { setPreview }: any, { data,setData }: any ) => {
    let [count,setCount] = useState(0)
    let formRows: ReactNode = []

    const formHandler = (i:number) => {
        console.info(data) //Console log here also shows data is undefined

        return formRows = [
             (<div key = {`innerDiv${i}`}>
                <div><h2>Entry {i+1}</h2></div>
                <div>
                    <label>Position</label>
                    <input type = "text" placeholder='Engineer' onChange = {(e) => setData({...data,position: e.target.value})} value = {data.position} /> //Error is here (data is undefined)
                </div>
            </div>)
         ]
    }

    const updateHandler = () => {
        setCount(prev => prev+1)
    }

    return (
        <div>
            <div>
                <div>
                </div>
                <form onSubmit = {(e) => sendData(e)}>
                    {[...Array(count+1)].map((d,i) => (<div key = {`outerDiv${i}`} >{formHandler(i)}</div>))}
                    <div>
                        <input type = "button" value='+' onClick = {() => updateHandler()} />
                    </div>
        
                </form>
            </div>
        </div>
    )
}

Опять же, я опускаю лишнее, чтобы сосредоточиться на проблеме.

У меня есть книга, изучающая это в течение последних нескольких дней, и я не смог найти решение в Интернете, поэтому я решил опубликовать свой собственный вопрос.

Надеюсь, этот код ясен :)