react函数里的state不更新，咋办？

Question

场景

有一个聊天输入框组件，输入框上面有表情包组件。
通过redux创建了store，存储一个message的状态，用于表情包和输入框共享状态。
输入框通过设置value和onClick做了一个简单双向绑定，其中value的值为store里的message。

import { update } from "@/features/messageSlice";
import { useStoreSelector, useStoreDispatch } from "@/hooks/store";
const ChatInput: React.FC = () => {
  const message = useStoreSelector((state) => state.message.value);
  const dispatch = useStoreDispatch();
  return (
    <textarea
      value={message}
      onChange={(e) => {
        const val = (e.target as HTMLTextAreaElement).value;
        dispatch(update(val));
      }}
      className="chatInput"
      style={{
        width: "100%",
        resize: "none",
        outline: "none",
        border: "none",
      }}
    ></textarea>
  );
};
export default ChatInput;

表情包组件做了一个方法，选择表情包时通过回调传回值与message值做拼接，结果message值为上一次的值

import { useStoreSelector, useStoreDispatch } from "@/hooks/store";
import { update } from "@/features/messageSlice";
import DIcon from "@/components/DIcon";
import { chatTools } from "../../config";
import { Tooltip } from "antd";
const ChatTools: React.FC = () => {
  const message = useStoreSelector((state) => state.message.value);
  const dispatch = useStoreDispatch();
  const onSelectContent = (ct: any) => {
    dispatch(update(message + ct.emoji));
  };
  return (
    <div className="chatTools">
      {chatTools.map(({ icon, tooltip, extra }) => {
        const Comp: any = extra;
        return (
          <Tooltip key={icon} placement="top" title={tooltip}>
            <Tooltip
              placement="top"
              overlayStyle={{ maxWidth: "100%" }}
              overlayInnerStyle={{ color: "#000000" }}
              color="#ffffff"
              title={<Comp onSelectContent={onSelectContent}></Comp>}
              trigger="click"
            >
              <span style={{ margin: "0 12px 0 0" }}>
                <DIcon type={icon} style={{ fontSize: "24px" }}></DIcon>
              </span>
            </Tooltip>
          </Tooltip>
        );
      })}
    </div>
  );
};

export default ChatTools;

结果：当我输入一段文字后，添加一个表情包，再输入一段文字，再添加一个表情包时。。就会覆盖掉前一段文字。

个人尝试：
1.设置一个state存储选择的表情包，然后通过useEffect监听state的变化更新message。结果出现新bug，那就是不能重复选择表情包，因为state不改变导致useEffect不执行。
2.仔细分析了一下原因，是Tooltip组件未更新，导致message是属于第一次闭包的。在内嵌的Tooltips添加了一个key，值为message。结果成功，但是有个警告