I am working on a React component where I need to select an item from a list and update the state with the selected item’s ID. I then want to conditionally render the selected item. However, I am encountering an issue where the state update is not reflecting immediately, causing my conditional rendering to fail.

Here is my component:

import React, { useState } from "react";

// Store imports
import { Agendamentos } from "@src/store/userAgendamentosStore";
import useQuickReply from "@src/store/respostasRapidas/quickRepliesStore";
import { useModalOptions } from "@src/store/components/modalOptions";
import IcoRes from "@src/pages/content/menuLateral/components/icoRes";
import SelectRespostasRapidas from "@src/modalOptions/selectRespostasRapidas";
import { BsLightningCharge } from "react-icons/bs";

export default function ResSelect({ updateForm }) {
    const { quickReplies } = useQuickReply();
    const { open } = useModalOptions();
    const [respostaRapidaID, setRespostaRapidaID] = useState<string | null>(null);

    const handleSelectQuickReply = (e) => {
        const element = e.currentTarget;

        open(
            <SelectRespostasRapidas
                onSelect={(res) => {
                    console.log("Selected response:", res);
                    setRespostaRapidaID(res.id);
                    updateForm("respostaRapida", res.id); // Pass the new id directly
                }}
            />,
            { placement: "bottom-start" },
            element,
            10,
            {
                mounted: () =>
                    element.setAttribute(
                        "style",
                        `outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2);`
                    ),
                desmouted: () => element.removeAttribute("style"),
            }
        );
    };

    return (
        <div className="flex flex-col gap-2 shadow-md border border-solid border-[var(--intro-background)] p-2 rounded-lg">
            <div className="flex justify-between items-center">
                <div className="flex gap-2 items-center">
                    <span>
                        <BsLightningCharge className="w-4 h-4 text-[var(--icon)]" />
                    </span>
                    <span>
                        <h2 className="label-text">Selecione uma mensagem rápida</h2>
                    </span>
                </div>
            </div>

            <div className="form-control w-full">
                <div
                    className="select select-bordered select-sm !cursor-pointer border border-solid"
                    onClick={handleSelectQuickReply}>
                    {quickReplies.map((res) => { 
                        console.log("res.id:", res.id, "respostaRapidaID:", respostaRapidaID);
                        if (res.id === respostaRapidaID) {
                            return (
                                <div key={res.id} className="pulse flex gap-2 py-1 items-center">
                                    <span>
                                        <IcoRes type={res.type} />
                                    </span>
                                    <span
                                        className="text-base overflow-hidden text-ellipsis whitespace-nowrap"
                                        style={{ width: `calc(300px - 100px)` }}>
                                        {res.titulo}
                                    </span>
                                </div>
                            );
                        }
                        return null; // Return null for non-matching items
                    })}
                </div>
            </div>
        </div>
    );
}

I expected the state respostaRapidaID to update immediately with the selected item’s ID when setRespostaRapidaID(res.id) is called.

I expected the component to re-render with the new state value, showing the selected item based on the conditional rendering logic.

Chrome Console returns: