Completely new to web development, I have been working on an app with a navbar that allows users to select items from a drop-down menu. My specific issue is trying to access the title.id in a sibling component, but it keeps coming up as null.

PARENT COMPONENT:

import Popup from 'reactjs-popup';
import Navbar from '../../components/navbar.js'
import {AddQuestion, TitleDescription} from '../../components/discussionPage_styles.js'
import { TitleOutlined } from '@mui/icons-material';
import {update} from "../../components/discussionfunctions.js"
import DiscussionPage  from '../../components/discussionPage.js';
import React, { useState } from "react";

const discussions = () => {
  const [selectedTitleId, setSelectedTitleId] = useState(null);

  const handleTitleSelect = (titleId) => {
    setSelectedTitleId(titleId);
  };

  return (
    <>
      <Navbar handleTitleSelect={handleTitleSelect} />
      <DiscussionPage selectedId={selectedTitleId} />
    </>
  );
};

export default discussions;

SIBLING 1;

import React, { useEffect, useState } from "react";
import DotsVertical from '@mui/icons-material/MoreVert';
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
import People from '@mui/icons-material/People';
import { fetchDiscussions } from './discussionfunctions.js';
import {IconContext} from "react-icons";
import 
{
    DiscussionDropdownContainer,
    DiscussionDropdownMenu,
    DropdownContainer,
    DropdownButton,
    DropdownLink,
    DropdownMenu,
    DropdownMenuItem,
    Nav,
    NavbarContainer,
    Menu,
    MenuLink,
    MenuItem,
    closeMenu,
    IconButton,
} from './navbar_styles';
import DiscussionPage from "../pages/dashboard/discussions.js";

const Navbar = ({handleTitleSelect}) => {
  const [click, setClick] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [titles, setTitles] = useState([]);
  const [isTitleOpen, setIsTitleOpen] = useState(false);
  
  const handleMenuToggle = () => {
    setClick(!click);
  };

  //dropdown state
  const handleDropdownToggle = () => {
    setIsOpen(!isOpen);
  };

  const handleTitleToggle = () => {
    setIsTitleOpen(!isTitleOpen);
  }

  //save current titleId
  const handleTitleSelectNav = (titleId) => {
    handleTitleSelect(titleId);
  }


  const handleLogout = () => {
    // handle logout logic here
  };
  //grab all the titles from the discussiondata.json

  useEffect(() => {
    extractTitles();
  }, []);

  const extractTitles = async () => {
    const discussions = await fetchDiscussions();
  
    if (!discussions) {
      console.error('No discussions found');
      return;
    }
  
    const titles = discussions.map(discussion => ({
      id: discussion.id,
      name: discussion.name,
    }));
  
    setTitles(titles);
  }

  return (
    <div>
      <IconContext.Provider value={{ color: '#fff'}}> 
        <Nav>
          <NavbarContainer>
          <DiscussionDropdownContainer>
              <DropdownButton onClick={handleTitleToggle}>
                <ArrowDropDown />
              </DropdownButton>
              {isTitleOpen && (
                <DiscussionDropdownMenu>
                  {titles.map(title => (
                    <DropdownMenuItem key={title.id}>
                      <DropdownLink onClick={() => handleTitleSelectNav(title.id)} href={`/dashboard/discussions`}>{title.name}</DropdownLink>
                    </DropdownMenuItem>
                  ))}
                </DiscussionDropdownMenu>
              )}
            </DiscussionDropdownContainer>
            <Menu onClick={handleMenuToggle} click={click}>
              <MenuItem>
                <MenuLink onClick={closeMenu} href="/dashboard/discussions">Discussions</MenuLink>
              </MenuItem>
              <MenuItem>
                <MenuLink onClick={closeMenu} href="/responses">Responses</MenuLink>
              </MenuItem>
              <MenuItem>
                <MenuLink onClick={closeMenu} href="/insights">Insights</MenuLink>
              </MenuItem>
            </Menu>
            <DropdownContainer>
                <DropdownButton onClick={handleDropdownToggle}>
                  <DotsVertical />
                </DropdownButton>
                {isOpen && (
                  <DropdownMenu>
                    <DropdownMenuItem>
                        <DropdownLink onClick={closeMenu} href="/settings">Settings</DropdownLink>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        <DropdownLink onClick={closeMenu} href="/">Log Out</DropdownLink>
                    </DropdownMenuItem>
                  </DropdownMenu>
                )}
              </DropdownContainer>
                <IconButton>
                    <People />
                </IconButton>
          </NavbarContainer>
        </Nav>
      </IconContext.Provider>
    </div>
  );
}

export default Navbar;

SIBLING 2:

import Navbar from './navbar.js'
import {AddQuestion, TitleDescription} from './discussionPage_styles.js'
import {update} from "./discussionfunctions.js"
 

const DiscussionPage = ({ selectedId }) => {

    console.log("Selected Title ID: ", selectedId);

    return (
        <div>
            <TitleDescription action="something" method="post" >
                <label for="first">{selectedId}</label>
                <input type="text" id="first" name="first" />
                <label for="last">Description</label>
                <input type="text" id="last" name="last" />
                <button type="submit">Submit</button>
            </TitleDescription>
            <AddQuestion src="../plus-circle.svg"/>
        </div>
    )
}

export default DiscussionPage

I've attempted using chatgpt and other methods to retrieve that data without success, looking for serious assistance.