React Native UseEffect Hata

import React,{useEffect, useState} from 'react';
import {SafeAreaView, Text, View, Button} from 'react-native';


function App()  {
  const [goster,setGoster] = useState(true);

  
 function gizleme(){
  setGoster(!goster)
 }

  return (
    <SafeAreaView>
      <Button title='Arttır' onPress={gizleme} />
[B]      {goster && gizleGoster()}[/B]
    </SafeAreaView>
  );
}
export default App;

function gizleGoster(){
 useEffect(() => {
  console.log("Başladı bitti");
  // İşlevinizi buraya yerleştirin
  return () => {
    console.log("bitti");
    // Component kaldırıldığında yapılacak temizleme işlemleri
  };
}, []);
  return(
    <View>
    <Text>Ben İlhan Söylemez</Text>
    </View>
  );
}

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. hatası alıyorum. ve {goster && gizleGoster()} bu kısımdaki gizlegoster() kısmını <gizlegoster/> olarak kullanamıyorum bu konuda yardımcı olur musunuz