Type 'Error' is not assignable to type 'ReactNode'

I am getting the error when i am passing the error to the message component.

Type 'Error' is not assignable to type 'ReactNode'.ts(2322)

Message.tsx(6, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Pick<Props, "children"> & InexactPartial<Pick<Props, "variant">> & InexactPartial<Pick<{ variant: string; }, never>>'

loginScreen.tsx

return (
<FormContainer>
  <h1>Sign In</h1>
  {error && <Message variant="danger">{error} //this one is giving the error </Message>}
  {loading && <Loader />}
  <Form onSubmit={submitHandler}>
    <Form.Group controlId="email">
      <Form.Label>Email Address</Form.Label>
      <Form.Control
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Form.Group controlId="password">
      <Form.Label>Password</Form.Label>
      <Form.Control
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Button type="submit" variant="primary">
      Sign in
    </Button>
  </Form>
  <Row className="py-3">
    <Col>
      New Customer?{" "}
      <Link to={redirect ? `/register?redirect=${redirect}` : "/register"}>
        Register
      </Link>
    </Col>
  </Row>
</FormContainer>

Message.tsx

import { Alert } from "react-bootstrap";

interface Props {
  variant: string;
  children: ReactNode;
}

const Message = ({ variant, children }: Props) => {
  return (
    <Alert variant={variant}>
      {children}
    </Alert>
  );
};

Message.defaultProps = {
  variant: "info",
};

export default Message;