How can i modify the header structure of Drawer Navigator, taking into account that each screen will have a different header?

 import * as React from "react";

import { SafeAreaView, useWindowDimensions } from "react-native";
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from "@react-navigation/native";

import { RegistrationScreen } from './src/screens/Registration/RegistrationScreen';
import {LoginScreen} from './src/screens/Login/LoginScreen';
import {NewAnuncioScreen} from './src/screens/NewAnuncio/NewAnuncioScreen';
import { FeedScreen } from "./src/screens/Feed/FeedScreen";

import { FontAwesome, AntDesign, FontAwesome5, Entypo} from '@expo/vector-icons';


const Drawer = createDrawerNavigator()

const App = () => {

  const dimensions = useWindowDimensions();

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Feed" screenOptions={{
          headerStyle: { backgroundColor: "#f2bc1b" , height: 55},
          drawerType: dimensions.width >= 821 ? 'permanent' : 'front',
          overlayColor: 'transparent',
          drawerContent:{CustomDrawerContent}
        }}>
          <Drawer.Screen name="Feed" component={FeedScreen}/>
          <Drawer.Screen name="Registration" component={RegistrationScreen} options={{ headerShown: false }} />
          <Drawer.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
          {/* <Drawer.Screen name="Criar Anúncio" component={NewAnuncioScreen} /> */}
        </Drawer.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )

  
}

export default App;

**I want the header´s structures can vary like that: enter image description here enter image description here

But i don´t know how to make this. If someone help me i thanks.**