Problem with types when using react-bootstrap Button with react-router and typescript

I have created a simple react bootstrap card component which looks like that:

<Card className={` ${styles.stretchCard}`}>
  <Card.Body className='d-flex flex-column'>
    <Card.Title>{post.title}</Card.Title>
    <Card.Text className='m-0'><span className={styles.dataTitle}>Author: </span>{post.author}</Card.Text>
    <Card.Text ><span className={styles.dataTitle}>Published: </span>{post.publishedDate}</Card.Text>
    <Card.Text>{post.shortDescription}</Card.Text>
    <Button
      as={Link}
      to={`post/${post.id}`}
      className='align-self-start mt-auto'
    >
      Read more
    </Button>
  </Card.Body>
</Card>

The component uses boostrap Button in which the as property is passed and it is a react-router Link component. Everything works just fine but after compiling the code I get the following error:

Type 'ForwardRefExoticComponent<LinkProps & RefAttributes>' is not assignable to type '(ForwardRefExoticComponent<LinkProps & RefAttributes> & keyof IntrinsicElements) | undefined'. Type 'ForwardRefExoticComponent<LinkProps & RefAttributes>' is not assignable to type 'ForwardRefExoticComponent<LinkProps & RefAttributes> & "symbol"'. Type 'ForwardRefExoticComponent<LinkProps & RefAttributes>' is not assignable to type '"symbol"'. 18 | <Card.Text >Published: {post.publishedDate}</Card.Text> 19 | <Card.Text>{post.shortDescription}</Card.Text> 20 | <Button as={Link} to={post/${post.id}} className='align-self-start mt-auto'>Read more | ^^ 21 | </Card.Body> 22 | 23 |

I was wondering whether I could cast the Link item with a specific type - if so what should it look like, because that is what I cannot figure out. I really would like to keep the type checking for the whole project so I do not want to cast as "any".