Javascript 更改输入时要更新的触发器脚本

我正在建立一个简单的网站。用户将输入设置为tweet，并将输入传递到twitter的blockquote href以在我的页面上呈现tweet：

import React, { useState } from 'react';
import "./TweetsSectionStyle.css"

const TweetsSection = (props) => {
    const [input, setInput] = useState(props.items)

    const UserTweetFromInput = (event) => {
        setInput(event.target.value);
    } 

    return (
        <div className="tweets">
            <blockquote class="twitter-tweet">
                <a href={input}></a>
            </blockquote>
            <script src="http://platform.twitter.com/widgets.js" charset="utf-8"></script> 
            <input type="text" onChange={UserTweetFromInput}/>
        </div>
    );
};

export default TweetsSection;

import React，{useState}来自“React”；
导入“/TweetsSectionStyle.css”
常量TweetsSection=（道具）=>{
常量[input，setInput]=useState（props.items）
const UserTweetFromInput=（事件）=>{
setInput（event.target.value）；
} 
返回(
);
};
导出默认TweetsSection；

问题出现在这里，脚本似乎没有运行，因此推特没有呈现。。。但是，如果我直接将输入设置为tweet，然后突然重新加载页面，tweet会呈现：

<a href={"https://twitter.com/GrandCanyonNPS/status/1384647573797961729"}></a>

是否有一种方法可以触发此tweet，以响应我设置的动态输入

---

谢谢。

您看到指南中标题为。。。如果在页面中动态插入新内容，请将新文档片段传递给以初始化嵌入的Tweet内容