× Error: Element type is invalid: expected a string (for built-in components) - reactjs

Question

Getting this below error in my code. I am unable to find what is the error. Please help.
×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `LoginForm`..
LoginForm.js
import React from "react";
import { BoxContainer, FormContainer, MutedLink, SubmitButton, Input } from "./common";
import { Marginer } from "../marginer";
export function LoginForm(props) {
return (
<BoxContainer>
<FormContainer>
<Input type ="email" placeholder="Email" />
<Input type ="password" placeholder="Password" />
<Marginer direction="vertical" margin={5} />
<MutedLink href="#">Forget your password?</MutedLink>
<Marginer direction="vertical" margin="lem" />
<SubmitButton type="submit">Signin</SubmitButton>
</FormContainer>
</BoxContainer>
);
}
index.js
import React from 'react'
import styled from 'styled-components'
import { LoginForm } from './loginForm';
const BoxContainer = styled.div`
width: 280px;
min-height: 550px;
display: flex;
flex-direction: column;
border-radius: 19px;
background-color: #fff;
box-shadow: 0 0 2px rgba(15, 15, 15, 0.28);
position: relative;
overflow: hidden;
`;
const TopContainer =styled.div`
width: 100%;
height: 250px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 1.8em;
padding-bottom: 5em;
`;
const BackDrop = styled.div`
position: absolute;
display: flex;
flex-direction: column;
width: 160%;
height: 550px;
border-radius: 50%;
top: -290px;
left: -70px;
transform: rotate(60deg);
background: rgb(241, 196, 15);
background: linear-gradient(
58deg,
rgba(241,196,15,1) 20%,
rgba(243,172,18,1) 100%
)
`;
const HeaderContainer = styled.div`
width:100%;
display: flex;
flex-direction:column;
margin:auto;
`;
const HeaderText = styled.h2`
font-size: 30px;
font-weight: 600;
line-height: 1.24;
color: #fff;
z-index: 10;
margin: 0;
margin-right: 218px;
`;
const SmallText = styled.h5`
color:#ece5e5;
font-weight: 500;
font-size: 11px;
z-index: 10;
margin:0;
margin-right: 147px;
margin-top: 6px;
`;
const InnerContainer = styled.div`
width: 100%;
display: flex;
flex-direction:column;
`;
export function AccountBox(props) {
return (
<BoxContainer>
<TopContainer>
<BackDrop />
<HeaderContainer>
<HeaderText>Welcome</HeaderText>
<HeaderText>Back</HeaderText>
<SmallText>please sign-in to continue!</SmallText>
</HeaderContainer>
</TopContainer>
<InnerContainer>
<LoginForm />
</InnerContainer>
</BoxContainer>
);
}
marginer.js
import React from "react";
import styled from "styled-components";
const HorizontalMargin = styled.span`
display: flex;
width: ${({ margin }) =>
typeof margin === "string" ? margin : `${margin}px`};
`;
const VerticalMargin = styled.span`
display: flex;
height: ${({ margin }) =>
typeof margin === "string" ? margin : `${margin}px`};
`;
function Marginer(props) {
const { direction } = props;
if (direction === "horizontal") return <HorizontalMargin {...props} />;
else {
return <VerticalMargin {...props} />;
}
}
Marginer.defaultProps = {
direction: "horizontal",
};
export { Marginer };