Iam getting a error while rendering a component in the main component using react js

The error is: Objects are not valid as a React child (found: object with keys {code, message, a}). If you meant to render a collection of children, use an array instead.

I will show my code where Iam trying to render the component:

document.querySelector(".App").innerHTML = "";
const errorElement = <ShowErr message={err} />;
ReactDOM.render(errorElement, document.querySelector(".App"));

My component:

import Button from "@material-ui/core/Button";

const reload = () => {
  window.reload();
};

const ShowErr = (props) => {
  const imgStyle = {
    display: "block",
    margin: "auto",
    marginTop: "100px",
    marginBottom: "50px",
    borderRadius: "50%",
  };
  const msgStyle = {
    textAlign: "center",
    marginTop: "30px",
    fontFamily: "Ubuntu",
    color: "red",
  };
  const btnStyle = {
    display: "block",
    margin: "auto",
    marginTop: "50px",
  };

  return (
    <div className="err">
      <link rel="preconnect" href="https://fonts.gstatic.com" />
      <link
        href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"
        rel="stylesheet"
      ></link>

      <img
        src="https://img.icons8.com/emoji/48/000000/cross-mark-button-emoji.png"
        style={imgStyle}
      />
      <h3 className="error-msg" style={msgStyle}>
        {props.message}
      </h3>
      <Button color="secondary" style={btnStyle} onClick={reload}>
        Reload and Try Again
      </Button>
    </div>
  );
};

export default ShowErr;

Please tell if any solution