Two way binding between React components

working on a navbar (making changes for mobile devices) – when on a mobile device I want to display the items vertically with a “Close” button at the bottom of the list, which results in the nav tab being collapsed. And when collapsed, an open button at the top to expand the navbar. My current implementation achieves the collapse of the close bar, but the navigation bar is built using two components, so I’m wondering how I could pass the isCollapsed unilaterally between both.

First component:

const NavigationTabs = ({ className, items }: Props) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  function menuCollapsed() {
    setIsCollapsed(true);
  }

  return (
    <StyledList className={classNames("nav-tabs", className)}>
      <StyledHeaderBlock />
      {items.map((link) => (
        <NavigationItem key={link.key} link={link} isTab />
      ))}
      <StyledCloseBar isCollapsed={isCollapsed}>
        <StyledCloseText
          onKeyDown={menuCollapsed}
          onClick={menuCollapsed}
          role="button"
          tabIndex={0}
        >
          <Icon isOberonIcon={true} name={"closeMenu"} />
          Close
        </StyledCloseText>
      </StyledCloseBar>
    </StyledList>
  );

Using setState and display:none on StyledCloseBar when isCollapsed is true – I then want to use that value in my second component, so that I can make similar changes to the CSS, is this possible?

I need this value synced up so that both components behave as expected?

Second component:

const NavigationItem = ({
  className,
  isActive = false,
  isTab = false,
  link,
  pathname,
  isCollapsed,

}: Props) => {

  return (
    <StyledTabItem
      className={classNames("nav-item", className, {
        active: isActiveLink,
      })}
      isTab={isTab}
      isActive={isActiveLink}
    >
      <StyledLink
        dataId={link.key}
        href={link.href}
        isActive={isActiveLink}
        isTab={isTab}
        icon={hasIconLink ? oberonIcon : link.icon}
        isNavLink
        isOberonIcon={hasIconLink}
      >
        {link.label}
        <StyledOpenText>
          <Icon isOberonIcon={true} name={"expandMenu"} />
          Open
        </StyledOpenText>
      </StyledLink>
    </StyledTabItem>
  );

Answer

Change this line

<NavigationItem key={link.key} link={link} isTab />

to

<NavigationItem key={link.key} link={link} isTab isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />

And then

const NavigationItem = ({
  className,
  isActive = false,
  isTab = false,
  link,
  pathname,
  isCollapsed,
  setIsCollapsed
}: Props) => {