diff --git a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx
index e520fbbd72..778e792085 100644
--- a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx
+++ b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx
@@ -14,8 +14,6 @@ import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 import { InviteMemberFormValues } from '../PendingInvitesContainer/index';
 import { SelectDrawer, SpaceContainer, TitleWrapper } from './styles';
 
-const { Option } = Select;
-
 function InviteTeamMembers({ form, onFinish }: Props): JSX.Element {
 	const { t } = useTranslation('organizationsettings');
 
@@ -38,7 +36,13 @@ function InviteTeamMembers({ form, onFinish }: Props): JSX.Element {
 								<Space key={key} direction="horizontal" align="start">
 									<Form.Item
 										name={[name, 'email']}
-										rules={[{ required: true, message: requireErrorMessage('Email') }]}
+										rules={[
+											{
+												required: true,
+												message: requireErrorMessage('Email'),
+												type: 'email',
+											},
+										]}
 									>
 										<Input placeholder={t('email_placeholder')} />
 									</Form.Item>
@@ -47,9 +51,9 @@ function InviteTeamMembers({ form, onFinish }: Props): JSX.Element {
 									</Form.Item>
 									<Form.Item name={[name, 'role']} initialValue="VIEWER">
 										<SelectDrawer>
-											<Option value="ADMIN">ADMIN</Option>
-											<Option value="VIEWER">VIEWER</Option>
-											<Option value="EDITOR">EDITOR</Option>
+											<Select.Option value="ADMIN">ADMIN</Select.Option>
+											<Select.Option value="VIEWER">VIEWER</Select.Option>
+											<Select.Option value="EDITOR">EDITOR</Select.Option>
 										</SelectDrawer>
 									</Form.Item>
 								</Space>