Header.jsx

const Header = () => (
  <StyledHeader>
    <nav>
      <ModalContext.Consumer>
        {(modalProps) => (
          <Button onClick={modalProps.showModal}>login</Button>
          {/*
            we pass modalProps so the Modal can use them to render if show is true
            and to provide the hideModal method for our close functionality
          */}
          <Modal title="hello" modalProps={modalProps}>
            <p>helloooo</p>
          </Modal>
        )}
      </ModalContext.Consumer>
    </nav>
  </StyledHeader>
);