Custom header not showing using useLayoutEffect

I want to make custom header using useLayoutEffect but it's not working for me. It would be great if someone could help.

useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: "Hello",
    headerStyle: {
      backgroundColor: "#00CED1",
    },
    headerLeft: () => (
      <Image
        style={{ width: 140, height: 120, resizeMode: "contain" }}
        source={{
          uri: "https://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c518.png",
        }}
      />
    ),
    headerRight: () => (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 6,
          marginRight: 12,
        }}
      >
        <Ionicons name="notifications-outline" size={24} color="black" />

        <AntDesign name="search1" size={24} color="black" />
      </View>
    ),
  });
}, []); 
return (
    <ScrollView style={{ padding: 10, flex: 1, backgroundColor: "white" }}>
    <Text style={{ fontSize: 16, fontWeight: "bold" }}>
      Welcome Sanju
    </Text>
    </ScrollView>
   
  )
}

Above code not showing custom header. Only showing 'Welcome Sanju'. Thanks in advance

Please make sure headerShown: true into your Stack.Screen.