EXPO errors and warnings when using vector icons - react-native

Question

I've recently updated my Expo SDK from 3.0 to 3.2 and I've suddenly started to get all kinds of erros, at first I needed to replace my use of vector icons from
import Icon from "react-native-vector-icons/Ionicons";
to
import {Ionicons} from '#expo/vector-icons';
Because I started to get the following error using the old method
fontFamily "Ionicons" is not a system font and has not been loaded through Font.loadAsync.
I checked the expo docs https://docs.expo.io/versions/latest/guides/icons/
It is the recommended method. But now when using this method I get the following message
The syntax "import { Font } from 'expo-font'" is deprecated. Use "import * as Font from 'expo-font'" or import named exports instead. Support for the old syntax will be removed in SDK 33.
So I'm confused as it is recommended to use this method in version 3.2 but it will be also deprecated in the next
I've tried changing my .babelrc file
{
"presets": [ "babel-preset-expo" ]
}
// Uitgeschakeld inverband met https://github.com/expo/expo/issues/2576
// {
// "presets": ["babel-preset-expo"],
// "env": {
// "development": {
// "plugins": ["transform-react-jsx-source"]
// }
// }
// }
Removing node_modules and reinstalling
checking expo version in app.json and package.json
App.json
{
"expo": {
"name": "Rapio",
"description": "Wait less, enjoy more.",
"slug": "Rapio",
"privacy": "public",
"sdkVersion": "32.0.0",
"ios": {
"bundleIdentifier": "com.rapio.consumerapp"
},
"android": {
"package": "com.rapio.consumerapp"
},
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^8.0.0",
"axios": "^0.18.0",
"expo": "^32.0.0",
"navigation": "^5.1.0",
"react": "^16.6.0",
"react-native": "0.57.1",
"react-native-elements": "^1.1.0",
"react-native-fbsdk": "^0.8.0",
"react-native-maps": "^0.22.1",
"react-native-payment-gateway": "^0.4.3",
"react-native-simple-radio-button": "^2.7.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^2.18.2",
"react-redux": "^5.1.1",
"redux": "^4.0.1"
},
"devDependencies": {
"schedule": "^0.4.0"
}
}
I'm expecting to be able to use the correct method for using icons without getting error messages or warnings