Dynamic Search is not getting build, Data is always showing undefined in the console

This is my code which i am using to buld a search bar which shows me the result in the below of the search bar dynamically like facebook or Instagram do.But its not happening i tried multiple times but when i put value in the search it is calling once and then again i have refresh it to get the Api data.

import React, { useEffect, useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import searchScreen from './searchScreen';
import { View, Text, Dimensions, TextInput } from 'react-native';
import colors from '../../../res/colors';

export default function searchNavigator() {
  const Stack = createStackNavigator();
  const [text, setText] = useState("");
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    async function getData(text) {
      const api = 'http://188.166.189.237:3001/api/v1/profile/';

      await fetch(api + text)
        .then((response) => response.json())
        .then((responseJson) => {
          setDataSource(responseJson)
          console.log("Search Data", dataSource);
        })
        .catch((error) => {
          console.log("Seach error", error);
        })
    };
    getData();
  }, []);

This is the search input where i am putting the value of the search text which is connected to Api. It would be more appreciable if anyone can help me out with this, thanks in advance.

 <View style={{
              marginHorizontal: 5, marginVertical: 10, justifyContent: "center",
              alignItems: "center"
            }}>
              <TextInput
                style={{
                  backgroundColor: colors.textInputBackground,
                  height: 35,
                  width: Dimensions.get('screen').width - 10,
                  fontWeight: 'bold',
                  borderRadius: 10,
                  paddingStart: 20,
                  fontSize: 16,
                  color: 'white',
                }}
                onChangeText={(text) => setText(text)}
                placeholder="Search"
                placeholderTextColor={colors.textFaded2}
              />
            </View>

>Solution :

You should add dependency to your useEffect. getData is not being called when you change search. The bellow code will run your useEffect whenever your text state changes.

useEffect(() => {
    async function getData(text) {
      const api = 'http://188.166.189.237:3001/api/v1/profile/';

      await fetch(api + text)
        .then((response) => response.json())
        .then((responseJson) => {
          setDataSource(responseJson)
          console.log("Search Data", dataSource);
        })
        .catch((error) => {
          console.log("Seach error", error);
        })
    };
    getData();
  }, [text]);