The link inside a clickable div(div has link) does not work

Question

I am working with React.js and I have a clickable 'main' div(the div with the onClick function at top) and I have an other link inside this div, and some clickable elements inside the div( the elements inside the PostFooter component are clickable).

When I click the link inside the div(the link that links to /profile/username) it only triggers the click event on the 'main' div. So I want to be able to click anywhere inside the 'main' div that triggers the onClick={postpop} function, except when I click the link that links to /profile/username.

I have seen other posts where people suggets to absolute position the links inside the 'main' div, but that doesn't work.

I hope it is clear what my question is, thanks in advance for your answer.

<div onClick={postpop} className="post">
    <div  className="post__avatar">
                <Link to={`/profile/${username}`}>
                {avatar?
                <img src={avatar} className="post__profile__pic"/>
                :<Avatar className="post__profile__pic" src=''/>}
                </Link>
    </div>
    <div className="post__body">
      <div className="post__header">
            <div className="post__headerText">
             <h3> {username}{""}
                 <span className="post__headerSpecial">
                {verified&&<VerifiedUserIcon className="post__badge"></VerifiedUserIcon>}
                @{username}
                 </span>
            </h3>
            </div>
      <div className="post__headerDescription">
          {newText?
            <p id="posttext"></p>:<p>{text}</p>}
      </div>
      </div>
    {image&&
    <img className="post__img"src={image} alt=""></img>}
     {user&&allow?
<PostFooter userId={userId} token={token} likes={likes}comments={comments}shares={shares} username={username} avatar={avatar} verified={verified}text={text}image={image} widget/>
:<div></div>}
</div>
</div>