TypeError: email.indexOf is not a function

[hafizSiddiq7675]

The following is my CustomForm

const CustomForm = ({ status, message, onValidated }) => {

    const [email, setEmail] = useState('')
    const [customErr, setCustomErr] = useState(false);
    const handleSubmit = (e) => {
        e.preventDefault();
        setEmail(e.currentTarget.email.value)
        console.log(email.length)
        if(email.length === 0) {
            setCustomErr(true);
            return;
        }
        setCustomErr(false);
        email &&
        email.indexOf("@") > -1 &&
        onValidated({
            EMAIL: email,
        });

    }
    return (
<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" onSubmit={(e) => handleSubmit(e)} className="validate">
						<div id="mc_embed_signup_scroll" className="form-inner">
							<div className="mc-field-group">
								<div className="form-group">
									<input type="email" name="email" onChange={setEmail} className="form-control required email" id="mce-EMAIL" placeholder="Email"/>
								</div>
                                {customErr && (
                                    <div htmlFor="mce-EMAIL" className="mce_inline_error">This field is required.</div>
                                )}
							</div>
							<div className="form-group">
								<button type="submit" name="subscribe" id="mc-embedded-subscribe" className="btn">Subscribe</button>
							</div>
							<div id="mce-responses" className="form-group-messages">
                            {status === "sending" && (
                            <div className="mc__alert mc__alert--sending">
                                sending...
                            </div>
                            )}
                            {status === "error" && (
								<div className="response" id="mce-error-response">{message}</div>
                            )}
                            {status === "success" && (
								<div className="response" id="mce-success-response">{message}</div>
                            )}
							</div>
							<div style={{position: "absolute", left: "-5000px"}} aria-hidden="true"></div>
						</div>
					</form>
    );
};

The Following is the Main Container.

const MailchimpFormContainer = props => {
    const postUrl = `https://beverlyhillscarclub.us5.list-manage.com/subscribe/post?u=xxxxxx`;
    return (
        <div id="mc_embed_signup">
            <MailchimpSubscribe url={postUrl} 
            render={({ subscribe, status, message }) => (
                <CustomForm
                    status={status} 
                    message={message}
                    onValidated={formData => subscribe(formData)}
                />
            )}
            />
        </div>
    );
};

export default MailchimpFormContainer;

I am not sure What is the issue, But I am getting the error in the Title.