reactjs - React Apollo:Mutation コンポーネント内の要素 Trix-Editor にアクセスする方法は?

Question

<trix-editor>コンポーネント内の要素にアクセスするのに助けが必要Mutationです。私はReact hook useRef()これにアクセスするために使用していますが、null. （下の画像）からChrome Dev Tools、要素が参照されていることがわかります。こことここで与えられた解決策のいくつかを試しましたが、うまくいきませんでした。Mutationコンポーネントのレンダリングに問題があるようです。私はにかなりReact慣れていないので、これが正しいかどうかわかりません。私は何を間違っていますか？よろしくお願いいたします。

私のコード:

const EditProfile = () => {
  const trixInput = useRef(null);
  const [state, setState] = useState({
                              firstName: "",
                              lastName: "",
                              bio: "",
                              avatar: "",
                              gender: "",
                              country: ""
                            });

  let userID
  let { username }    = useParams();
  let userFromStore   = JSON.parse(sessionStorage.getItem('_ev')));
  let history         = useHistory();

  useEffect(() => {
    // trixInput.current.addEventListener("trix-change", event => {
       console.log(trixInput.current); // <<<< this prints null to the screen 
    // })
  },[]);

  if (userFromStore !== username) {
    return (
      <div className="alert">
         <span className="closebtn" onClick={() => history.push("/console")}>&times;</span>
          <strong>Wanning!</strong> Not authorized to access this page.
      </div>
    );
  }
  return (
    <Query query={GetAuthUser}>
      {({ loading, error, data }) => {
        if (loading) return "loading...";
        if (error)   return `Error: ${error}`;

        if (data) {
          let {userId, firstName, lastName, avatar, bio, gender, country} = data.authUser.profile;
          userID = parseInt(userId);

          return (
            <Mutation mutation={UpdateUserProfile}>
              {(editProfile, { loading }) => (
                <div  className="card bg-light col-md-8 offset-md-2 shadow p-3 mb-5 rounded">
                  <article className="card-body">
                    <form onSubmit={ e => {
                      e.preventDefault();
                      editProfile({
                        variables: {
                          userId:    userID,
                          firstName: state.firstName,
                          lastName:  state.lastName,
                          bio:       state.bio,
                          avatar:    state.avatar,
                          gender:    state.gender,
                          country:   state.country
                        }
                      }).then(({ data: { editProfile: { success, errors }  } }) => {
                        success ? alert(success) : alert(errors[0]["message"]);
                      });
                    }}
                    >
                    <div className="form-row mb-3">
                      <div className="col">
                        <input
                          type="text"
                          name="firstName"
                          placeholder="First name"
                          className="form-control"
                          defaultValue={firstName}
                          onChange={e => setState({firstName: e.currentTarget.value})}
                        />
                      </div>
                      <div className="col">
                        <input
                          type="text"
                          name="lastName"
                          placeholder="Last name"
                          className="form-control"
                          defaultValue={lastName}
                          onChange={e => setState({lastName: e.currentTarget.value})}
                        />
                      </div>
                    </div>
                    <div className="form-group">
                      <label className="">Bio</label>
                      <input
                        type="hidden"
                        defaultValue={bio}
                        name="bio"
                        id="bio-body"
                      />
                      // <<< having trouble accessing this ref element
                      <trix-editor input="bio-body" ref={trixInput}/>
                    </div>

                    <input type="submit" className="btn btn-primary" value="Update Profile" disabled={loading}/>
                    </form>
                  </article>
                </div>
              )}
            </Mutation>
          );
        }
      }}
    </Query>
  )
}

export default EditProfile;

更新：興味のある人は、 コンポーネントを別のファイルに抽出することで問題が解決しました。Mutation理由は、コンポーネントがMutationレンダリング時にマウントされておらず、Queryコンポーネントのみがマウントされていたためです。ソリューションの最初の繰り返しが回答として表示されます。