All functional components are changing its state while clicking only one of them

I am working on making Q&A website with react. I've faced one problem while making post table. My aim was to make option list when the user would click the three-dot button. So I added the useState hook for controlling the state of button. The problem is all the posts are changing state once I click the button.

before click

after click

My logic is that the ThreeDotsAreClicked variable are set to false by default, and after clicking the BiDotsVerticalRounded button state changes to its pervious state.

Here is my functional component:

function PostsTableForPC(props) {
  const [ThreeDotsAreClicked, setThreeDotsAreClicked] = useState(false);
  const navigate = useNavigate();

  function goToHomepage() {
    navigate('/homepage')
  }

  return (
    <>
      <div className="postsdivcontainer">
        <div className="sortby">
          <MultipleSelect
            Placeholder={"Sort By"}
            arr={["Recent Activity", "2", "3"]}
          />
          <MultipleSelect Placeholder={"More Actions "} arr={["1", "2", "3"]} />
        </div>

        <button className="createnewpostbutton"><Link to={"/createnewpost"} >Create New Post</Link></button>
      </div>
      <div className="tabledivcontainer">
        <table>
          <tr>
            <th></th>
            <th></th>
            <th>
              <AiOutlineComment size={25} className="spacebtween" />
            </th>
            <th>
              <AiOutlineHeart size={25} className="spacebtween" />
            </th>
            <th>
              <AiOutlineEye size={25} className="spacebtween" />
            </th>
            <th>
              <p className="recentactivity">Recent Activity</p>
            </th>
          </tr>
          {props.post.map((x) => (
            <tr>
              <td><h3>{x[0]}</h3></td>
              <td>{x[1]}</td>
              <td>{x[2]}</td>
              <td>{x[3]}</td>
              <td>{x[4]}</td>
              <td><FiUser />{x[5]}</td>
              <td className="dotsverticalrounded">
                <BiDotsVerticalRounded size={22} onClick={() => { setThreeDotsAreClicked(prevCheck => !prevCheck) }} />
                {ThreeDotsAreClicked && <div className='dropdown'>
                  <ul>
                    <li>Open</li>
                    <li>Like</li>
                    <li>Report</li>
                  </ul>
                </div>}
              </td>
            </tr>      
          ) 
          )
        }
        </table>
      </div>
    </>
  );
}

export default PostsTableForPC