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