Reactでコンポーネントのjsxの内部の要素が空になる

Question

ReactでTweetの埋め込みをしようと思い、
firestoreからTweetIDを取得し、react-tweet-embedというパッケージを用いて表示させたかったのですが、<TwitterTweetEmbed />の部分だけ空のdiv要素になってしまいます。
また、fireStoreからのデータの取得は成功しています。
また、App.jsに直接書き込んだ場合は、正常に表示されました。
原因や解決方法分かる方いらっしゃいましたら、ご教授お願い致します。

こちら該当のコードです。

import React from 'react';

import {TwitterTweetEmbed} from 'react-twitter-embed';
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { doc, getDoc } from "firebase/firestore";
const firebaseConfig = {
};

export default class Tweets extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          item: ''
        };
    }
    async componentDidMount() {
        initializeApp(firebaseConfig);
        const db = getFirestore();
        const docRef = doc(db, "", "");
        var docSnap = await getDoc(docRef);
        this.setState({item:docSnap.data()['0'][0]})
    }
    render() {
        const item = this.state.item;
        return (
            <div>
                <p>{item}</p>
                <TwitterTweetEmbed tweetId={{item}} options={{width:550}} /> 
            </div>
        );
    };
}

Comments

[hoshi-takanori]

これですか？
https://www.npmjs.com/package/react-twitter-embed

tweetId の指定が間違ってる気が…。

[hugahuga]

{{items}}にしてみたけど結果変わりませんでした…

[hoshi-takanori]

tweetId は tweetId={'933354946111705097'} のように文字列を指定するようですが、items は名前からすると配列のよう (初期値はからの配列で、その後の setState でどうなるかは質問文のコードからは分かりませんが) ですが。そして、tweetId={{items}} だとオブジェクト型になりますね…。

[hugahuga]

こちらitemsの中身文字列となっております。itemsの中身は正常であると判断していただいて大丈夫です。

[hoshi-takanori]

なら変更前の tweetId={items} でいけるはずですね。(配列じゃないのに items と複数形なのは紛らわしいですが。)
もしかすると、初期値が [] なのが悪さをしてるのかも…。

[hugahuga]

TwitterTweetEmbedにオブジェクトを渡すと、同じ症状になることが分かりました。
しかし、itemsの型はStringで、itemsの初期値を''に変えてみても挙動は変わりませんでした...