Исправлено печатание, когда обертка cloneElement передает ребёнку реквизит

Question

РЕДАКТИРОВАТЬ: После дальнейших исследований понял, что это невозможно - см. аналогичный вопрос . Собираюсь прибегнуть только к использованию функции рендеринга.

---

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

По сути, у меня есть компонент Modal это оборачивает детей и вызывает cloneElement для передачи пользовательской функции close. См. Ниже:

// modal
type Props = {
    onClose: () => void
    children: ReactElement<any>
}

function Modal({ children, onClose }: Props){
    const close = useCallback(() => {
        // some custom close logic here
        onClose()
    }, [])

    // other modal logic here

    return <div className="modal">
        <div className="modal-bg" />
        {/* close is passed in to cloned child */}
        {cloneElement(children, { close })}
    </div>
}

// my component
type Props = {
    close: () => void
}

function MyComponent({ close }: Props){
    return <div>
        My component
        <button onClick={close}>Close</button>
    </div>
}


// putting it all together
function EverythingTogether(){
    const onClose = () => { ... }

    return <div>
        <Modal onClose={onClose}>
            // ERROR: Property 'close' is missing in type '{}' but required in type 'Props'.ts(2741)
            <MyComponent />
        </Modal>
    </div>
}

Так, если у дочернего компонента есть требование для close пропеллера, EverythingTogether выдает ошибку ts, что MyComponent не было предоставлено опоры close, даже если модальный обеспечивает это.

Как бы я go добавил тип, который что-либо, переданное компоненту Modal в качестве дочернего элемента, получит close prop?

Пример песочницы