Remix React - Type '{ closeCallback: MouseEventHandler; }' is not assignable to type 'IntrinsicAttributes & MouseEvent

In the component below I am showing a dialog which takes a closeCallback function as a props. Code for Basic Model basically takes in this prop and call it anytime the cross button is clicked. But then instead of actually disappearing I am noticing an error in my console logs, i.e. closeCallback is not a function.

Also noticed closeCallback in CloseModalButton is unerlined with red. When I hover over it I see the following error,

Type '{ closeCallback: MouseEventHandler<HTMLElement>; }' is not assignable to type 'IntrinsicAttributes & MouseEventHandler<HTMLElement>'.  Property 'closeCallback' does not exist on type 'IntrinsicAttributes & MouseEventHandler<HTMLElement>'.ts(2322)

Not sure why is closeCallback above is enclosed in an object and if that has anything to do withit? How can I fix this?

Code below,

export default function NotesPage() {  const [showAddNoteDialog, setShowAddNoteDialog] = useState(false);  const handleBtnClick = () => setShowAddNoteDialog(true);  return (<>      ....<section className="container mx-auto p-2"><section>        {showAddNoteDialog && (<BasicModal closeCallback={() => setShowAddNoteDialog(false)}>{/* Change the type of closeCallback */}<Note /></BasicModal>        )}        ....</section></>  );}

Basic Modal,

type ModalProps = {  closeCallback: React.MouseEventHandler<HTMLElement>;} & PropsWithChildren;export const BasicModal = (props: ModalProps) => {  console.log('closeCallback', props.closeCallback);  const { closeCallback } = props;  return (<section className="basic-modal"><CloseModalButton closeCallback={closeCallback} />      {props.children}</section>  );};

CloseModalButton,

export const CloseModalButton = (closeCallback: React.MouseEventHandler<HTMLElement>) => {  return (<button      type="button"      onClick={() => closeCallback()}> X </button>);   }