diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..fcadb2c
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text eol=lf
diff --git a/@types/index.d.ts b/@types/index.d.ts
index 7821c64..3ec7673 100644
--- a/@types/index.d.ts
+++ b/@types/index.d.ts
@@ -19,11 +19,16 @@ declare namespace EntitiesSearch {
 			: PostType<'edit'>[K];
 	}>;
 
-	type Record<V extends any> = Readonly<{
+	type ControlOption<V extends any> = Readonly<{
 		value: V;
 		label: string;
 	}>;
 
+	type ComponentStateAware<V> = {
+		value: V;
+		setValue(value: ComponentStateAware['value']): void;
+	};
+
 	type EntitiesRecords<Entity> = Readonly<{
 		records(): Set<Entity>;
 		isResolving(): boolean;
@@ -35,19 +40,21 @@ declare namespace EntitiesSearch {
 	 * Components
 	 */
 	interface PostTypeSelect<V> {
-		readonly value: Record<V> | null;
-		readonly options: Set<NonNullable<PostTypeSelect<V>['value']>>;
+		readonly value: V | null;
+		readonly options: Set<ControlOption<V>>;
 		readonly onChange: (value: PostTypeSelect<V>['value']) => void;
 	}
 
 	interface PostsSelect<V> {
-		readonly value: Set<Record<V>> | null;
-		readonly options: NonNullable<PostsSelect<V>['value']>;
+		readonly value: Set<V> | null;
+		readonly options: Set<ControlOption<V>>;
 		readonly onChange: (values: PostsSelect<V>['value']) => void;
 	}
 
 	interface PostsController<P, T> {
-		readonly postsComponent: React.ComponentType<ComponentStateAware<P>>;
+		readonly postsComponent: React.ComponentType<
+			ComponentStateAware<Set<P>>
+		>;
 		readonly typesComponent: React.ComponentType<ComponentStateAware<T>>;
 	}
 }
diff --git a/sources/js/src/components/post-type-select.tsx b/sources/js/src/components/post-type-select.tsx
index 08c38a9..00cc020 100644
--- a/sources/js/src/components/post-type-select.tsx
+++ b/sources/js/src/components/post-type-select.tsx
@@ -1,16 +1,41 @@
 import EntitiesSearch from '@types';
+import { Set } from 'immutable';
 import React, { JSX } from 'react';
-import Select from 'react-select';
+import Select, { SingleValue } from 'react-select';
+
+import { matchOptionValues } from '../utils/match-option-values';
+import { onChangeControlOptionsHandle } from '../utils/on-change-control-options-handle';
 
 export function PostTypeSelect<V>(
 	props: EntitiesSearch.PostTypeSelect<V>
 ): JSX.Element | null {
+	const matchedValues = matchOptionValues(Set([props.value]), props.options);
+
+	const onChange = (values: Set<V> | null) =>
+		props.onChange(values?.first() ?? null);
+
 	return (
 		<Select
 			isMulti={false}
-			value={props.value}
+			value={matchedValues?.first() ?? null}
 			options={props.options.toArray()}
-			onChange={props.onChange}
+			onChange={(options) => {
+				if (isNonNullableValue(options)) {
+					onChange(null);
+					return;
+				}
+
+				onChangeControlOptionsHandle(
+					onChange,
+					Set(options ? [options] : [])
+				);
+			}}
 		/>
 	);
 }
+
+function isNonNullableValue<V>(
+	value: SingleValue<EntitiesSearch.ControlOption<V>>
+): value is NonNullable<EntitiesSearch.ControlOption<V>> {
+	return value !== null && value.value !== null;
+}
diff --git a/sources/js/src/components/posts-post-types-controller.tsx b/sources/js/src/components/posts-post-types-controller.tsx
index b9baa88..4a88ee7 100644
--- a/sources/js/src/components/posts-post-types-controller.tsx
+++ b/sources/js/src/components/posts-post-types-controller.tsx
@@ -4,9 +4,9 @@ import React, { JSX } from 'react';
 
 import { useState } from '@wordpress/element';
 
-export function PostsPostTypesController<P, T>(
+export const PostsPostTypesController = <P, T>(
 	props: EntitiesSearch.PostsController<P, T>
-): JSX.Element {
+): JSX.Element => {
 	const [state, setState] = useState({
 		posts: Set<P>(),
 		types: Set<T>(),
@@ -21,8 +21,8 @@ export function PostsPostTypesController<P, T>(
 
 	const Types = () => (
 		<props.typesComponent
-			value={state.types}
-			setValue={(types) => setState({ ...state, types })}
+			value={state.types.first()}
+			setValue={(type) => setState({ ...state, types: Set([type]) })}
 		/>
 	);
 
@@ -32,4 +32,4 @@ export function PostsPostTypesController<P, T>(
 			<Posts />
 		</>
 	);
-}
+};
diff --git a/sources/js/src/components/posts-select.tsx b/sources/js/src/components/posts-select.tsx
index 6e92d3d..ca160e5 100644
--- a/sources/js/src/components/posts-select.tsx
+++ b/sources/js/src/components/posts-select.tsx
@@ -3,19 +3,22 @@ import { Set } from 'immutable';
 import React, { JSX } from 'react';
 import Select from 'react-select';
 
-import { isControlOption } from '../utils/is-control-option';
+import { matchOptionValues } from '../utils/match-option-values';
+import { onChangeControlOptionsHandle } from '../utils/on-change-control-options-handle';
 
 export function PostsSelect<V>(
 	props: EntitiesSearch.PostsSelect<V>
 ): JSX.Element | null {
+	const values = matchOptionValues(props.value, props.options);
+
 	return (
 		<Select
 			isMulti={true}
-			value={props.value?.toArray()}
+			value={values?.toArray() ?? []}
 			options={props.options.toArray()}
-			onChange={(options) => {
-				props.onChange(Set(options.filter(isControlOption)));
-			}}
+			onChange={(options) =>
+				onChangeControlOptionsHandle(props.onChange, Set(options))
+			}
 		/>
 	);
 }
diff --git a/sources/js/src/utils/convert-post-types-to-control-options.ts b/sources/js/src/utils/convert-post-types-to-control-options.ts
index 42f9912..2198886 100644
--- a/sources/js/src/utils/convert-post-types-to-control-options.ts
+++ b/sources/js/src/utils/convert-post-types-to-control-options.ts
@@ -3,7 +3,7 @@ import { Set } from 'immutable';
 
 export function convertPostTypesToControlOptions(
 	postTypes: Set<EntitiesSearch.PostType>
-): Set<EntitiesSearch.Record<EntitiesSearch.PostType['slug']>> {
+): Set<EntitiesSearch.ControlOption<EntitiesSearch.PostType['slug']>> {
 	return postTypes.map((postType) => ({
 		label: postType.name,
 		value: postType.slug,
diff --git a/sources/js/src/utils/is-control-option.ts b/sources/js/src/utils/is-control-option.ts
index ae74a10..bd93d98 100644
--- a/sources/js/src/utils/is-control-option.ts
+++ b/sources/js/src/utils/is-control-option.ts
@@ -1,8 +1,8 @@
 import EntitiesSearch from '@types';
 
-export function isControlOption(
+export const isControlOption = (
 	value: unknown
-): value is EntitiesSearch.Record<any> {
+): value is EntitiesSearch.ControlOption<any> => {
 	if (!value) {
 		return false;
 	}
@@ -11,4 +11,4 @@ export function isControlOption(
 	}
 
 	return value.hasOwnProperty('label') && value.hasOwnProperty('value');
-}
+};
diff --git a/sources/js/src/utils/match-option-values.ts b/sources/js/src/utils/match-option-values.ts
new file mode 100644
index 0000000..6311676
--- /dev/null
+++ b/sources/js/src/utils/match-option-values.ts
@@ -0,0 +1,10 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+
+export const matchOptionValues = <V>(
+	value: Set<V> | null,
+	options: Set<EntitiesSearch.ControlOption<V>>
+): Set<EntitiesSearch.ControlOption<V>> | null => {
+	if (!value) return null;
+	return options.filter((option) => value?.has(option.value));
+};
diff --git a/sources/js/src/utils/on-change-control-options-handle.ts b/sources/js/src/utils/on-change-control-options-handle.ts
new file mode 100644
index 0000000..3cf002b
--- /dev/null
+++ b/sources/js/src/utils/on-change-control-options-handle.ts
@@ -0,0 +1,19 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+
+import { isControlOption } from './is-control-option';
+
+/**
+ * @internal
+ * @param handler
+ * @param options
+ */
+export const onChangeControlOptionsHandle = <V>(
+	handler: (values: Set<V> | null) => void,
+	options: Set<EntitiesSearch.ControlOption<V>> | null
+): void => {
+	if (options === null) return;
+	const controlOptions = Set(options).filter(isControlOption);
+	const values = controlOptions.map((option) => option.value);
+	handler(values.size > 0 ? values : null);
+};
diff --git a/tests/js/unit/components/__snapshots__/posts-post-types-controller.test.tsx.snap b/tests/js/unit/components/__snapshots__/posts-post-types-controller.test.tsx.snap
new file mode 100644
index 0000000..6fbfe84
--- /dev/null
+++ b/tests/js/unit/components/__snapshots__/posts-post-types-controller.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Posts Post Types Controller render the given components 1`] = `
+<DocumentFragment>
+  <div>
+    Post Type Component
+  </div>
+  <div>
+    Posts Component
+  </div>
+</DocumentFragment>
+`;
diff --git a/tests/js/unit/components/post-types-select.test.tsx b/tests/js/unit/components/post-types-select.test.tsx
index c2f1dd1..f0ecece 100644
--- a/tests/js/unit/components/post-types-select.test.tsx
+++ b/tests/js/unit/components/post-types-select.test.tsx
@@ -18,12 +18,7 @@ jest.mock('react-select', () => (props: ReactSelect) => (
 	<select
 		id="post-type-select"
 		data-testid="post-type-select"
-		onChange={() =>
-			props.onChange({
-				label: faker.random.word(),
-				value: faker.word.noun(),
-			})
-		}
+		onChange={() => props.onChange(faker.word.noun())}
 		className="react-select"
 	>
 		{props.options.map((option: any) => (
@@ -41,18 +36,18 @@ describe('Post Types Select', () => {
 	 */
 	it('call the given onChange handler', (done) => {
 		let expectedCalled: boolean = false;
-		const option: EntitiesSearch.Record<string> = {
+		const option: EntitiesSearch.ControlOption<string> = {
 			label: faker.random.word(),
 			value: faker.word.noun(),
 		};
-		const options = Set<EntitiesSearch.Record<string>>([])
+		const options = Set<EntitiesSearch.ControlOption<string>>([])
 			.add(option)
 			.merge(buildOptions());
 
 		render(
 			<PostTypeSelect
 				options={options}
-				value={option}
+				value={option.value}
 				onChange={() => (expectedCalled = true)}
 			/>
 		);
diff --git a/tests/js/unit/components/posts-post-types-controller.test.tsx b/tests/js/unit/components/posts-post-types-controller.test.tsx
new file mode 100644
index 0000000..b2d42f1
--- /dev/null
+++ b/tests/js/unit/components/posts-post-types-controller.test.tsx
@@ -0,0 +1,120 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+import React from 'react';
+
+import { describe, expect, it, jest } from '@jest/globals';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PostsPostTypesController } from '../../../../sources/js/src/components/posts-post-types-controller';
+
+type State = {
+	posts: Set<string>;
+	types: Set<string>;
+} | null;
+
+let STATE: State = null;
+const dispatch: React.Dispatch<State> = (state: State) => (STATE = state);
+
+jest.mock('@wordpress/element', () => ({
+	useState: jest.fn((initialState: State): [State, React.Dispatch<State>] => {
+		return [STATE ?? initialState, dispatch];
+	}),
+}));
+
+describe('Posts Post Types Controller', () => {
+	it('render the given components', () => {
+		const PostsComponent = () => <div>Posts Component</div>;
+		const PostTypeComponent = () => <div>Post Type Component</div>;
+
+		const { asFragment } = render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		expect(asFragment()).toMatchSnapshot();
+	});
+
+	it('update the state when the posts component is updated', (done) => {
+		const PostTypeComponent = () => null;
+		const PostsSelect = (props: EntitiesSearch.PostsSelect<string>) => (
+			<button
+				data-testid="posts-component"
+				onClick={() => props.onChange(Set(['post-one', 'post-two']))}
+			>
+				Update Component State
+			</button>
+		);
+
+		const PostsComponent = (
+			props: EntitiesSearch.ComponentStateAware<Set<string>>
+		) => {
+			return (
+				<PostsSelect
+					value={props.value}
+					onChange={props.setValue}
+					options={Set([])}
+				/>
+			);
+		};
+
+		render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		const postComponentElement = screen.getByTestId('posts-component');
+		userEvent.click(postComponentElement).then(() => {
+			// @ts-ignore
+			expect(STATE.posts.toArray()).toEqual(['post-one', 'post-two']);
+			done();
+		});
+	});
+
+	it('update the state when the types component is updated', (done) => {
+		const PostsComponent = () => null;
+		const PostTypeSelect = (
+			props: EntitiesSearch.PostTypeSelect<string>
+		) => (
+			<button
+				data-testid="post-type-component"
+				onClick={() => props.onChange('post-type')}
+			>
+				Update Component State
+			</button>
+		);
+
+		const PostTypeComponent = (
+			props: EntitiesSearch.ComponentStateAware<string>
+		) => {
+			return (
+				<PostTypeSelect
+					value={props.value}
+					onChange={props.setValue}
+					options={Set([])}
+				/>
+			);
+		};
+
+		render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		const postTypeComponentElement = screen.getByTestId(
+			'post-type-component'
+		);
+		userEvent.click(postTypeComponentElement).then(() => {
+			// @ts-ignore
+			expect(STATE.types.toArray()).toEqual(['post-type']);
+			done();
+		});
+	});
+});
diff --git a/tests/js/unit/components/posts-select.test.tsx b/tests/js/unit/components/posts-select.test.tsx
index b0ed7e3..000f86d 100644
--- a/tests/js/unit/components/posts-select.test.tsx
+++ b/tests/js/unit/components/posts-select.test.tsx
@@ -13,7 +13,7 @@ import { PostsSelect } from '../../../../sources/js/src/components/posts-select'
 import { buildOptions } from '../utils';
 
 type ReactSelect = EntitiesSearch.PostsSelect<string> & {
-	value: Array<EntitiesSearch.Record<string>>;
+	value: Array<EntitiesSearch.ControlOption<string>>;
 };
 
 jest.mock('react-select', () => (props: ReactSelect) => (
@@ -21,16 +21,7 @@ jest.mock('react-select', () => (props: ReactSelect) => (
 		multiple={true}
 		id="posts-select"
 		data-testid="posts-select"
-		onChange={() =>
-			props.onChange(
-				Set([
-					{
-						label: faker.random.word(),
-						value: faker.word.noun(),
-					},
-				])
-			)
-		}
+		onChange={() => props.onChange(Set([faker.word.noun()]))}
 		className="react-select"
 	>
 		{props.options.map((option: any) => (
@@ -44,18 +35,18 @@ jest.mock('react-select', () => (props: ReactSelect) => (
 describe('Posts Select', () => {
 	it('call the given onChange handler', () => {
 		let expectedCalled: boolean = false;
-		const option: EntitiesSearch.Record<string> = {
+		const option: EntitiesSearch.ControlOption<string> = {
 			label: faker.random.word(),
 			value: faker.word.noun(),
 		};
-		const options = Set<EntitiesSearch.Record<string>>([])
+		const options = Set<EntitiesSearch.ControlOption<string>>([])
 			.add(option)
 			.merge(buildOptions());
 
 		render(
 			<PostsSelect
 				options={options}
-				value={Set([option])}
+				value={Set([option.value])}
 				onChange={() => (expectedCalled = true)}
 			/>
 		);
diff --git a/tests/js/unit/utils.ts b/tests/js/unit/utils.ts
index 47bc918..f89dafa 100644
--- a/tests/js/unit/utils.ts
+++ b/tests/js/unit/utils.ts
@@ -3,8 +3,8 @@ import { Set } from 'immutable';
 
 import { faker } from '@faker-js/faker';
 
-export function buildOptions(): Set<EntitiesSearch.Record<string>> {
-	let options = Set<EntitiesSearch.Record<string>>([]);
+export function buildOptions(): Set<EntitiesSearch.ControlOption<string>> {
+	let options = Set<EntitiesSearch.ControlOption<string>>([]);
 
 	for (let count = 0; count < 9; ++count) {
 		options = options.add({