Importing "PropertyPaneTextField" from the recommended package breaks my "Teams Tab" project and causes manifest-related errors

Question

I took on an existing Teams Tab w. SPFx project and I had to add some features.
Among those features: customizable property

I added the needed imports, and then I was warned that some of them are deprecated, and tried to use them from the recommended package. But this change broke my project completely and caused some errror in the Teams client.

This is my code before switching to the recommended package for import:

This is the code after using the recommended package:

The Teams error:

And my imports in the "package.json" file:

"dependencies": {
"@microsoft/sp-core-library": "1.8.2",
"@microsoft/sp-lodash-subset": "1.8.2",
"@microsoft/sp-office-ui-fabric-core": "^1.8.2",
"@microsoft/sp-property-pane": "1.8.2",
"@microsoft/sp-webpart-base": "1.8.2",
"@pnp/spfx-controls-react": "1.13.2",
"@types/es6-promise": "0.0.33",
"@types/react": "16.7.22",
"@types/react-dom": "16.8.0",
"@types/webpack-env": "1.13.1",
"@uifabric/file-type-icons": "^7.0.4",
"office-ui-fabric-react": "6.143.0",
"react": "^16.7.0",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "16.7.0"
},
"resolutions": {
"@types/react": "16.7.22"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
"@microsoft/sp-build-web": "1.8.2",
"@microsoft/sp-module-interfaces": "1.8.2",
"@microsoft/sp-tslint-rules": "1.8.2",
"@microsoft/sp-webpart-workbench": "1.8.2",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "^3.9.1",
"gulp-zip": "^5.0.0",
"gulp-sequence": "1.0.0",
"semver": "^6.2.0"
}
}

Can anybody help me understand what I did wrong ?
What's the correct fix for this situation ?

Thank you.