styled component 버튼 타입에러

import { ReactNode } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

interface ButtonProps {
  children?: ReactNode;
  onClick: (e: any) => void;
  type?: "link" | "button";
  url?: string;
}

const StyledButton = styled.button<ButtonProps>`
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
`;

function Button({ children, onClick, type = "button", url }: ButtonProps) {
  const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>;

  const RealLink = (
    <StyledButton onClick={() => {}}>
      <Link to={url!}>{children}</Link>
    </StyledButton>
  );
  return <div></div>;
}

export default Button;

강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니

button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요

interface ButtonProps { 
 children?: ReactNode; 
 onClick?: (e: any) => void; 
 type?: "link" | "button"; 
 url?: string; 
}