Javascript React Change按钮color onClick realtime-在firebase中动态更改/更新属性

我正在使用firebase和react创建实时聊天（基于在线教程）。我希望能够点击任何已经发送的聊天泡泡（实际上是按钮），并让它改变颜色（对于聊天页面上的任何用户）

它首先提示用户输入名称，然后允许您发送消息：。我是否应该创建一个onClick函数，以某种方式更改颜色，然后将该属性推送到firebase？我该怎么做呢？如何从代码中动态更新firebase上的数据

这就是我到目前为止所做的：

export default function TwoTruths() {
  const [input, setInput] = useState("");
  const [name, setUsername] = useState("");
  const [messages, setMessages] = useState();

  useEffect(() => {
    setUsername(prompt("Please enter your name"));
  }, []);

  const handleSend = (e) => {
    e.preventDefault();

    db.collection("twoTruths").add({
      message: input,
      name: name,
      image: image,
      timestamp: firebase.firestore.FieldValue.serverTimestamp()
    });

    setInput("");
  };
    
  
  return (
    <div className="twoTruths">
      {messages.map((message) =>
        message.name ? (
          <div className="twoTruths__message">
            <Avatar
              className="twoTruths__image"
              alt={message.name}
              src={message.image}
            />
            <button className="twoTruths__text">{message.message}</button>
          </div>
        ) : (
          <div className="twoTruths__message">
            <button className="twoTruths__textUser" >{message.message}</button>
          </div>
        )
      )}

      <form className="twoTruths__input">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="twoTruths__inputField"
          placeholder="Type here..."
          type="text"
        />
        <button onClick={handleSend} className="twoTruths__inputButton">
          {" "}
          SEND{" "}
        </button>
      </form>
    </div>
  );
}

导出默认函数twotuths（）{
const[input，setInput]=useState（“”）；
const[name，setUsername]=useState（“”）；
const[messages，setMessages]=useState（）；
useffect（（）=>{
setUsername（提示（“请输入您的姓名”）；
}, []);
常量handleSend=（e）=>{
e、 预防默认值（）；
db.集合（“两个真理”）。添加({
信息：输入，
姓名:姓名,，
图像：图像，
时间戳：firebase.firestore.FieldValue.serverTimestamp（）
});
设置输入（“”）；
};
返回(
{messages.map（（message）=>
消息名(
{message.message}
) : (
{message.message}
)
)}
setInput（e.target.value）}
className=“twoTruths\uuuu输入字段”
占位符=“在此处键入…”
type=“text”
/>
{" "}
发送{“}
);
}