Here's the original call. I use a NavItem component which I want to display the latest choice from the dropdown menu. Currently when I click on this nav item it will create a dropdown with many items to choose from.

<NavItem char = "Any" img={require("./SG pics/Asterisk.png")}> <DropdownMenu/> </NavItem>

Here is the NavItem component, it's pretty basic, just displays a picture and a name side by side

function NavItem(props){
const [open, setOpen] = useState(false);

return(
    <li className="nav-item" onClick= {() => setOpen(!open)}>
        <a href="#" className="charSelection" >
            <div className="icon-button"><img alt={props.char} src={props.img} width="40" height="40" /></div>
            <div className="charName">{props.char}</div>
        </a>
        {open && props.children}
    </li>
);
}

I nested the Dropdown menu with the dropdown items(I deleted all but 1 just to save space). I want to be able to pass my selection from DropdownItem to DropdownMenu to NavItem so I can show the selection and store it when it is clicked.

function DropdownMenu(props){
function DropdownItem(props){
    return(
        <a href="#" onClick={/*potentially set state*/} className='menu-item'>
            <img alt={props.char} src={props.img} width="30" height="30" />
            <div className="navItem">&nbsp;&nbsp;{props.char}</div>
        </a>
    )
}
return(
    <nav>
        <ul className="dropdown">
            <li><DropdownItem char="Any" img = {require("./SG pics/Asterisk.png")}> Player 1 Point</DropdownItem></li>
        </ul>
    </nav>
)
}

I have a feeling it has something to do with useState, but I couldn't find a good way to pass it to the 2nd parent. Or if there's a way to use a react component for select that allows you to use pictures please let me know. I have tried many components and none have sucessfully allowed me to have text and a picture for a dropdown.