setOpenCreatePost Function Not Triggered Despite Click Event Logging "Textarea clicked"

Question

I'm currently facing an issue in my Next.js application where the setOpenCreatePost function does not seem to be triggered when clicking on a . Although the console correctly logs "Textarea clicked," indicating that the click event is firing, the expected behavior of opening the post creation modal does not occur.

Here’s the relevant code for the :

<textarea
  onClick={() => {
    console.log("Textarea clicked");
    setOpenCreatePost(true);
  }}
  name="message"
  className="h100 bor-0 w-100 rounded-xxl p-2 ps-5 font-xssss text-grey-500 fw-500 border-light-md theme-dark-bg"
  cols="30"
  rows="10"
  placeholder="What's on your mind?"
></textarea>

And the conditional rendering for the CreatePost component looks like this:

{openCreatePost ? (
  <div className="createPost">
    <CreatePost
      setOpenCreatePost={setOpenCreatePost}
      CREATE_POST={CREATE_POST}
    />
  </div>
) : (
  ""
)}

Details:

• I have verified that the setOpenCreatePost function is being passed correctly to the CreatePost component.
• The openCreatePost state is set to true, but the modal does not appear.

Questions:

1. Are there any common pitfalls with state management in React that might prevent the modal from displaying even when the state is updated?
2. Could there be an issue related to the smart contract interaction that might be impacting the function's execution?

Links for Reference:

1. Repo Link: https://github.com/ahkharsha/Conneqt3
2. Function Call Page: https://github.com/ahkharsha/Conneqt3/blob/e4a1cdea519be47793b1c46d28ae0449ad4a3bff/client/components/Global/MainBody/MainCreatePost.jsx#L13
3. Corresponding index.js: https://github.com/ahkharsha/Conneqt3/blob/e4a1cdea519be47793b1c46d28ae0449ad4a3bff/client/components/Global/MainBody/index.js

I appreciate any insights or suggestions you might have to help resolve this issue!