"Invalid hook call." when trying to use useState in an arrow function – React native

Hello fellow StackOverflow community :
I’m encountering this issue, where my react-native app with TailwindCSS and TypeScript is returning me-

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reacts.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I am very new to react-native, trying to build a simple dynamic ui with TailwindCSS and TypeScript as you can see in the following code :

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useState} from 'react';
import Svg, {LinearGradient, Stop, Path} from 'react-native-svg';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  useColorScheme,
  View,
} from 'react-native';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

const Cloudy = (props: any) => (
  <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
    <LinearGradient
      id="a"
      x1={6.221}
      x2={37.408}
      y1={5.221}
      y2={36.408}
      gradientUnits="userSpaceOnUse">
      <Stop offset={0} stopColor="#fed100" />
      <Stop offset={1} stopColor="#e36001" />
    </LinearGradient>
    <Path
      fill="url(#a)"
      d="M24 4C13.507 4 5 12.507 5 23s8.507 19 19 19 19-8.507 19-19S34.493 4 24 4z"
    />
    <Path
      d="M38.998 23.485c-2.403-4.882-11.494-4.479-13.366 2.137-7.157.25-7.769 12.23-.632 12.107h10.995a18.946 18.946 0 0 0 6.927-13.289c-.724-.664-2.596-1.221-3.924-.955z"
      opacity={0.05}
    />
    <Path
      d="M38.925 23.674c-2.594-4.861-11.378-4.165-13.075 2.081-6.67.22-7.012 11.007-.351 11.064.89.008 7.525 0 11.405 0a18.474 18.474 0 0 0 5.999-12.14c-.846-.731-2.606-1.254-3.978-1.005z"
      opacity={0.07}
    />
    <Path
      d="M38.852 23.863c-2.786-4.841-11.263-3.852-12.783 2.025-6.183.19-6.254 9.968-.069 10.022.923.008 8.491 0 11.815 0a18.344 18.344 0 0 0 5.071-10.99c-.97-.799-2.619-1.289-4.034-1.057z"
      opacity={0.07}
    />
    <LinearGradient
      id="b"
      x1={29.373}
      x2={37.64}
      y1={20.668}
      y2={39.146}
      gradientUnits="userSpaceOnUse">
      <Stop offset={0} stopColor="#fcfcfc" />
      <Stop offset={1} stopColor="#c3c9cd" />
    </LinearGradient>
    <Path
      fill="url(#b)"
      d="M39.5 24c-.245 0-.484.022-.721.053A6.99 6.99 0 0 0 33 21a7 7 0 0 0-6.712 5.021C23.904 26.134 22 28.087 22 30.5a4.5 4.5 0 0 0 4.5 4.5h13a5.5 5.5 0 1 0 0-11z"
    />
  </Svg>
);
const [temperatureLevel, setTemperatureLevel] = useState('');
const temperatureEvaluation = (temperature: any) => {
  if (temperature < 19) {
    setTemperatureLevel('bg-blue-600 rounded-xl');
    return temperature;
  } else if (19 <= temperature && temperature < 27) {
    setTemperatureLevel('bg-green-600 rounded-xl');
    return temperature;
  } else if (27 <= temperature && temperature < 40) {
    setTemperatureLevel('bg-yellow-600 rounded-xl');
    return temperature;
  } else if (40 <= temperature) {
    setTemperatureLevel('bg-red-600 rounded-xl');
    return temperature;
  }
};
function Location(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View className="flex-col justify-center items-center">
      <Text
        className="text-[10vw] font-medium -mt-[2.5vw] mb-[2.5vw]"
        style={isDarkMode ? {color: '#e5e5e5'} : {color: '#262626'}}>
        Cannes
      </Text>
      <View className={temperatureLevel}>
        <Text className="text-[5vw] text-neutral-200 font-medium px-[2vw] py-[1vw] overflow-hidden drop-temperature rounded-temperature">
          {temperatureEvaluation(15)}℃
        </Text>
      </View>
    </View>
  );
}

function Section(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <View className="w-screen h-screen m-auto flex-col justify-center item-center">
      <View className="absolute top-0 flex justify-center items-center left-0 right-0">
        <Text
          className="font-semibold text-[5vw]"
          style={isDarkMode ? {color: '#e5e5e5'} : {color: '#262626'}}>
          Rainy
        </Text>
      </View>
      <Cloudy className="h-[30vw]" />
      <Location />
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = 'bg-neutral-200 dark:bg-black';

  return (
    <SafeAreaView className={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        className={backgroundStyle}>
        <Section />
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

(Here is also a screenshot from the app if that might help) :

I’ve met an error before that was saying "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop." that I managed to solve by creating the temperatureEvaluation arrow function, which then let me use it only on call, but this new error then popped in, and I don’t understand it at all.

Does anyone have a clue on how to solve this please ?
Thank you very much.