我尝试转换从dateRange变量获取的数据，但遇到错误：Argument of type 'Date | undefined' is not assignable to the parameter of type 'number | Date'. Type 'undefined' is not assignable to type 'number | Date'。我的代码有什么问题？
//头文件
从..“/上下文/上下文”导入{ useContextState }
常量表头=（）=〉{常量{日期范围，设置日期范围，设置打开日期，打开日期} =使用上下文状态（）

return (
           <span onClick={() => setOpenDate(true)} className="cursor-pointer">
            {`${format(dateRange[0].startDate, "MM/dd/yyyy")} To ${format(dateRange[0].endDate, "MM/dd/yyyy")}`}
        </span>
                     
    </nav>
)
}

export default Header
// context.tsx file

import { createContext, Dispatch, SetStateAction, useContext, useState } from "react";
import { addDays } from 'date-fns';
import { Range } from "react-date-range";
import { format } from "date-fns";

export interface Range {
    startDate?: Date | undefined ;
    endDate?: Date | undefined;
    key?: string | undefined
}
interface IstateContext {
    openDate: boolean
    setOpenDate: Dispatch<SetStateAction<boolean>>
    dateRange: Range[]
    setDateRange: Dispatch<SetStateAction<Range[]>>
}

const initialState = {
    openDate: false,
    setOpenDate: () => false,
    dateRange: [{
        startDate: new Date(),
        endDate: new Date(),
        key: "selection",
    }],
    setDateRange: () => void{}

}

const StateContext = createContext<IstateContext>(initialState)

interface Childern {
    children: React.ReactNode
}

export const ContextProvider: React.FC<Childern> = ({ children }) => {
    const [openDate, setOpenDate] = useState<boolean>(false)
    const [dateRange, setDateRange] = useState<Range[]>([
        {
            startDate: new Date(),
            endDate: new Date(),
            key: "selection",
        },
    ])

    return (
        <StateContext.Provider value={{ dateRange, setDateRange, openDate, setOpenDate
        }}>
            {children}
        </StateContext.Provider>
    )
}
export const useContextState = () => useContext(StateContext)