Getting problems implementing react-select package - reactjs

Question

I am working in a react app that is a form that contains a few dropdown components (from MS fabric).
I got a request asking for change some of these dropdown to combobox and the MS fabric combobox package doesn't work very well so I looked the internet and I found a package called React-select.
I tested the package in a simple react app before implementing it in the real project and it worked very well.
The problem is when I try to implement the same package in the real project. The problem is that as soon I implement the component my app stop working. If I remove the line the app works again.
The major difference between the test app and the real project is that in the project I am using Typescript. I have also other components in the project and just for testing I removed all of them but the problem remain.
No error messages in the developer console nor in the react app itself.
My implementation is like this:
Import the module:
import Select from "react-select";
Inside componentDidUpdate:
componentDidUpdate(prevProps: ISearchPersonFormProps): void {
if (this.props != prevProps) {
let civilServants = [] as any;
this.props.civilServants.forEach(civilServant => {
civilServants.push({ label: civilServant.PKATBESKR, value: civilServant.Id })
})
this.setState(
{
civilServants: civilServants
});
}
In my ISearchPersonFormProps I have this interface:
civilServants: ICivilServant[];
And in the render method i use the like this:
<Select options={this.state.civilServants} />
The civilServants state is of type IDropdownOptions[].
I tested the state of civilServants just before the Select-line and it contains all the information that I want to use in the Select component.
When I remove this Select-line the app works again otherwise nothing shows on the screen and no error message shows in the dev console.
Some info of my app:
React version: 16.11.10
Typescript version: 3.7.2
React-select version: 3.0.8
#types/react-select version: 3.0.8
Any comment will be helpful,
Thanks!
UPDATE:
this is the code for the component:
import * as React from "react";
import {
TextField,
Dropdown,
IDropdownOption,
Checkbox,
PrimaryButton,
Stack,
Label
} from "office-ui-fabric-react";
import { ISearchPersonFormProps } from "./ISearchPersonFormProps";
import { ISearchPersonFormState } from "./ISearchPersonFormState";
import Select from "react-select";
export class SearchPersonForm extends React.Component<
ISearchPersonFormProps,
ISearchPersonFormState
> {
constructor(props: ISearchPersonFormProps) {
super(props);
this.state = {
civilServants: [],
selectedOption: null
};
this._handleChange = this._handleChange.bind(this);
}
componentDidUpdate(prevProps: ISearchPersonFormProps): void {
if (this.props != prevProps) {
let civilServants: any[] = [];
this.props.civilServants.forEach(civilServant => {
civilServants.push({
value: civilServant.Id,
label: civilServant.PKATBESKR
});
});
this.setState({
civilServants: civilServants
});
}
}
private _handleChange = (selectedOption: any) => {
this.setState(
{
selectedOption
},
() => console.log(this.state.selectedOption)
);
};
public render(): React.ReactElement<ISearchPersonFormProps> {
const { selectedOption } = this.state;
console.log(this.state.civilServants);
return (
<div className="search-form">
<Stack horizontalAlign="start" tokens={{ childrenGap: 20 }}>
<Stack horizontal tokens={{ childrenGap: 25 }}>
<Select
value={selectedOption}
onChange={this._handleChange}
options={this.state.civilServants}
/>
</Stack>
</Stack>
</div>
);
}
}
This is the code for the porp interface:
import { ICivilServant } from "./ICivilServant";
export interface ISearchPersonFormProps {
civilServants: ICivilServant[];
}
This is the code for the state interface:
export interface ISearchPersonFormState {
selectedOption: any;
civilServants: any;
}
The ICivilServant is the interface that is used when the data is fetched from the DB.
The console log in the component shows that the data from the DB is correctly fetched.
But as I said before, as soon I add the Select component the app stop working without any error message.
UPDATE 2: Package.json
{
"name": "rk-proper",
"description": "Displays forms and listings (mostly) for everything regarding the solution.",
"configurationType": "Web Part",
"cewpHtmlContent": "<div id=\"proper-webpart-container\">​</div>",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},
"scripts": {
"dev": "concurrently \"webpack --config webpack.dev.js --watch\" \"gulp serve\"",
"build": "webpack --config webpack.release.js",
"build-dev": "webpack --config webpack.dev.js",
"clean": "gulp clean",
"configure-sp": "#powershell -NoProfile -ExecutionPolicy Unrestricted -Command ../StartDevelopment.ps1"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react": "^16.9.11",
"#types/react-dom": "^16.9.4",
"#types/react-table": "^6.8.5",
"#types/react-tabs": "^2.3.1",
"assets-webpack-plugin": "^3.9.10",
"awesome-typescript-loader": "^5.2.1",
"concurrently": "^5.0.0",
"gulp": "^4.0.2",
"#types/sharepoint": "^2016.1.6",
"gulp-clean": "^0.4.0",
"gulp-serve": "^1.4.0",
"node-sass": "^4.13.0",
"source-map-loader": "^0.2.4",
"typescript": "^3.7.2",
"webpack-cli": "^3.3.10",
"webpack-merge": "^4.2.2",
"office-ui-fabric-react": "^7.54.0",
"react-table": "^6.10.3",
"react-tabs": "^3.0.0"
}
}

Answer 1

Checkout this example here. Instead of value prop they are using defaultValue. Take a look of the documentation and try to change it in your code to see if this is the problem.