Login is not a function after logging out then trying to log back in

I am building a react project where I want to implement a log-in/ log out screen. I am able to succesfully log in but once I log out, I cannot log back in with the error "TypeError Login is not a function" being displayed. It seems to be coming from LogInForm.js, from the Login(details); line. I cannot spot my mistake here so I would greatly appreciate any feedback. Cheers.

LogInForm.js

import React, { useState } from "react";

function LogInForm({ Login, error }) {
  const [details, setDetails] = useState({ email: "", password: "" });
  const submitHandler = (e) => {
    e.preventDefault();
    Login(details);
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="form-inner">
        <h2>Login</h2>
        {/* ERROR!*/}
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            name="email"
            id="email"
            onChange={(e) => setDetails({ ...details, email: e.target.value })}
            value={details.email}
          />
        </div>
        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            name="password"
            id="password"
            onChange={(e) =>
              setDetails({ ...details, password: e.target.value })
            }
            value={details.password}
          />
        </div>
        <input type="submit" value="Log In" />
      </div>
    </form>
  );
}

export default LogInForm;

LogIn.js

import React, { useState } from "react";
import App from "./App";
import LogInForm from "./LogInForm";

function LogIn() {
  const adminUser = {
    email: "admin@admin.com",
    password: "test123"
  };

  const [user, setUser] = useState({ name: "", email: "" });
  const [error, setError] = useState("");

  const Login = (details) => {
    if (
      details.email == adminUser.email &&
      details.password == adminUser.password
    ) {
      console.log("Logged in!");
      setUser({ email: details.email, password: details.password });
    } else {
      console.log("details dont match");
    }
  };

  const Logout = () => {
    console.log("Logout");
  };

  return (
    <div className="Display">
      {user.email != "" ? (
        <App email={user.email} password={user.password} />
      ) : (
        <LogInForm Login={Login} error={error} />
      )}
    </div>
  );
}

export default LogIn;

index.js

import React from "react";
import ReactDOM from "react-dom";
import LogIn from "./LogIn";

ReactDOM.render(<LogIn />, document.getElementById("root"));

App.js

import React from "react";
import LogIn from "./LogIn";
import LogInForm from "./LogInForm";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: this.props.email,
      password: this.props.password,
    };
    this.logOut = this.logOut.bind(this);
  }


  logOut() {
    console.log("Logged out");
    this.setState({ email: "", password: "" });
  }

  componentDidMount() {
    console.log("Email:" + this.state.email);
    console.log("Password:" + this.state.password);
  }

  render() {
    if (this.state.email == "") {
      return <LogInForm />;
    } else {
      {
        console.log(this.state);
      }
      return (
          <div>Hello</div>,
          <button onClick={this.logOut}>Log Out</button>
      );
    }
  }
}

export default App;