Ссылки на объекты «undefined» при экспорте компонентов React

Я видел подобные вопросы по этой теме на этом сайте, особенно здесь: Невозможно деструктурировать свойство user на undefined или null

Но это не подходит для моего варианта использования. При использовании следующих компонентов реакции я получаю две следующие ошибки:

1. Невозможно деструктурировать свойство "actions" для "undefined", поскольку оно не определено. (относится ко всем компонентам, имеющим атрибут действия) 2. Невозможно деструктурировать свойство breach_display_controller на undefined, так как оно не определено. (Ссылка на ловушку useState компонента Accountbar)

Примечание. Класс Client находится в том же файле, что и класс HubPage.

родительский компонент:

export default function HubPage(params) {
        var Interface = new Client(params)
        const [person , changeperson] = useState(null)
        const [all_persons , addperson] = useState(Interface.profile_data)
        const [contacts_display_state , change_contacts_display_state] = useState(false);
        const [breach_display_state , change_breach_display_state] = useState(false);
        const [add_contact_display_state, change_add_contact_display_state] = useState(false);
        const [new_entry_display_state , change_new_entry_display_state] = useState(false);
        const [new_person_display_state, change_new_person_display_state]= useState(false);
        const [image_state , change_image_state] = useState(false);
       
    
        
            return (
                
                
                <div id = "hub_main_wrapper">    
                    <Profilesummary data = {person}/>
                    <Entryhubview data = {person}/>
                    <Profileview
                     persons = {all_persons} 
                     display_selector = {changeperson} 
                     />
    
                    <DetailsView data = {person}/>
                    <StatsBar 
                        data = {all_persons} 
                        all_selector = {addperson} 
                    />
                    <Accountbar 
                            contacts_display_controller = {change_contacts_display_state}  
                            actions = {Interface} 
    
                            breach_display_controller = {change_breach_display_state}
                    />
                    <Newpersonpopup 
                            actions = {Interface}
                            self_state_controller = {change_new_person_display_state}
                            state = {new_person_display_state}
                            image_state = {image_state}
                            image_state_controller = {change_image_state}
                    />    
                    <Newentrypopup 
                            actions = {Interface}
                            self_state_controller = {change_new_entry_display_state}
                            state = {new_entry_display_state}
                    />
                    <Confirmbreachpopup 
                            actions = {Interface}
                            state = {breach_display_state}
                            self_state_controller = {change_breach_display_state}
                    />    
                    <ContactsPopup 
                            add_state_controller = {change_add_contact_display_state} 
                            self_state_controller = {change_contacts_display_state}
                            state= {contacts_display_state}  
                            actions = {Interface} 
                    />
                    <Createcontactspopup 
                            state= {add_contact_display_state} 
                            self_state_controller = {change_add_contact_display_state}
                            actions = {Interface}
                    />    
                </div>
                    
            )
        
    }

компонент Accountbar:

import React from 'react'

export default function Accountbar({actions}, {contacts_display_controller} ,{breach_display_controller}) {
    var self = this;
    this.check_logout_status = async function(){
        const response = await actions.logout()
        if(response.status == "error"){
            //popup
        }
        else{
            //popup
        }   
    }

    
    return (
        <div id = "accountbar">
            <button id = "logoutbutton" onClick = {self.check_logout_status}> Logout </button>
            <button id = "contactsbutton" onClick = {function(){actions.change_display_state(contacts_display_controller)}}>Contacts</button>
            <button id = "breachbutton"onClick = {function(){actions.change_display_state(breach_display_controller)}} >Breach(Very Dangerous)</button>
            
        </div>
    )
}