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>);
   }