Как добавить forwardRef к функциональному React компоненту?

Есть компонент UiButton. Я добавил к нему typescript. Проект построен на Next JS и к компоненту нужно добавить React.forwardRef для корректный работы ссылки, в которую он будет оборачиваться.

Пример без TypeScript https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component

import styled from 'styled-components'
import { text } from 'base/mixins/text'

interface buttonProps {
    children: any
    className?: string
    type?: 'submit' | 'reset' | 'button'
    color?: string
    disabled?: boolean
    onClick?: React.MouseEventHandler
    wide?: string
    isLoading?: boolean
}

const UiButton: React.FC<buttonProps> = ({
    className,
    type,
    color,
    disabled,
    children,
    onClick,
    wide,
    isLoading,
}) => {
    return (
        <Wrapper wide={wide} color={color}>
            {!color && (
                <Button
                    onClick={onClick}
                    disabled={disabled}
                    className={className}
                    isLoading={isLoading}
                    type={type}
                >
                    {children}
                </Button>
            )}
            {color === 'blue' && (
                <Blue
                    onClick={onClick}
                    disabled={disabled}
                    className={className}
                    isLoading={isLoading}
                    type={type}
                >
                    {children}
                </Blue>
            )}
            {color === 'green' && (
                <Green
                    onClick={onClick}
                    disabled={disabled}
                    className={className}
                    isLoading={isLoading}
                    type={type}
                >
                    {children}
                </Green>
            )}
            {color === 'red' && (
                <Red
                    onClick={onClick}
                    disabled={disabled}
                    className={className}
                    isLoading={isLoading}
                    type={type}
                >
                    {children}
                </Red>
            )}
        </Wrapper>
    )
}
const Wrapper = styled.div<{
    wide: string
    color: string
}>`
    position: relative;
    display: ${(p) => (p.wide ? 'flex' : 'inline-flex')};
`
const Button = styled.button<{
    isLoading: boolean
    type: string
}>`
    ${text};
    border-radius: 4px;
    padding: 15px 16px;
    cursor: pointer;
    width: 100%;
    background: ${(p) => p.theme.color.primary_4};
    border-color: transparent;
    color: ${(p) => p.theme.color.white};
    /* transition: background 0.2s, color 0.2s, border-color 0.2s, font-weight 0.2s; */
    outline: none;
    user-select: none;
    &:hover,
    &:active,
    &:focus {
        /* background: ${(p) => p.theme.color.primary};
        color: ${(p) => p.theme.color.white};
        border-color: ${(p) => p.theme.color.primary}; */
    }
    ${(p) =>
        p.disabled &&
        `
        opacity: 0.5;
        pointer-events: none;
    `}
`
const Green = styled(Button)`
    color: ${(p) => p.theme.color.white};
    background: ${(p) => p.theme.color.success_4};
`
const Blue = styled(Button)`
    padding: 0;
    background: transparent;
    color: ${(p) => p.theme.color.primary_4};
`
const Red = styled(Button)`
    padding: 0;
    background: transparent;
    color: ${(p) => p.theme.color.danger_4};
`

export default UiButton