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

**My activation page**

import React from "react";
import "./auth.css";

const Activation = (props) => {
  const email = (props.location && props.location.state) || {};

  return (
    <>
      {email ? (
        <div className="activation">
          <i className="vjtal06 fas fa-check-circle"></i>
          <h2>Registration successful.</h2>
          <div className="abn5uhi">
            <p>Thank you. We have send you email to {email}</p>
            <p>
              Pleace click the link in that message to activate your account.
            </p>
          </div>
        </div>
      ) : (
        <div className="activation">
          <i className="vjtal06 fas fa-check-circle"></i>
          <h2>Session Expired</h2>
          <div className="abn5uhi">
            <p>Pleace try again.</p>
          </div>
        </div>
      )}
    </>
  );
};

export default Activation;