Динамический c стилизованный компонент с реквизитами функциональных компонентов

Question

Я пытаюсь не создавать экземпляр моего стилизованного компонента в методе рендеринга, но мне нужны реквизиты моего компонента для создания стиля, могу ли я сделать это с помощью простого компонента функции вне метода рендеринга? У меня ошибка машинописного ввода:

Нет перегрузки соответствует этому вызову. Перегрузка 1 из 2, '(props: Pick, HTMLElement>, "style" | "title" | "key" | "defaultChecked" | ... еще 250 ... | "onTransitionEndCapture"> & {...;} & {...;}, "style" | ... еще 257 ... | "rowEnd"> & Partial <...>, "style" | ... еще 257 ... | "rowEnd"> & {...;} & {...;}): ReactElement <...> ', выдал следующую ошибку. Тип '{children: Element []; имя_класса: строка; } 'отсутствуют следующие свойства из типа' Pick, HTMLElement>, "style" | "название" | "ключ" | "defaultChecked" | ... еще 250 ... | "onTransitionEndCapture"> & {...; } & {...; }, "стиль" | ... еще 257 ... | "rowEnd"> & Partial <...>, "style" | ... еще 257 ... | "rowEnd"> ': photo, rowStart, rowEnd Перегрузка 2 из 2,' (props: StyledComponentPropsWithAs <"figure", любая, {photo: Photo; rowStart: number; rowEnd: number;}, никогда>): ReactElement, string | ... еще 1 ... | (new (props: any) => Component <...>)> ', выдал следующую ошибку. Тип '{children: Element []; имя_класса: строка; } 'отсутствуют следующие свойства из типа' Pick, HTMLElement>, "style" | "название" | "ключ" | "defaultChecked" | ... еще 250 ... | "onTransitionEndCapture"> & {...; } & {...; }, "стиль" | ... еще 257 ... | "rowEnd"> & Partial <...>, "style" | ... еще 257 ... | "rowEnd"> ': фотография, rowStart, rowEnd

 type MyProps = {
    className: string,
    photo: IPhoto,
    rowStart: number,
    rowEnd: number,
}

const Figure = styled.figure<{photo: IPhoto, rowStart: number, rowEnd: number}>`
grid-column-start: ${props => props.photo.colStart};
grid-column-end: ${props => props.photo.colEnd};
grid-row-start: ${props => props.rowStart};
grid-row-end: ${props => props.rowEnd};
`; 


const Photo = (props: MyProps) => {
    return (
        <Figure className={props.className}>
            <Link to={`/photo/${props.photo.id}`}>
                <img src={props.photo.url_c} alt={props.photo.title} />
            </Link>
            <figcaption>{props.photo.title}</figcaption>
        </Figure>
    )
}

export default Photo;