react，不用useRef、不通过点击等事件，而用getElementById获取多个span标签里的文本内容？

代码如下：

const News = () => {
  let a1 = document.getElementById("a1")
  let b1 = document.getElementById("b1")
  let c1 = document.getElementById("c1")
  let d1 = document.getElementById("d1")
  console.log(a1.innerText)
  return (
    <div>
      <span id="a1" className={styles.a1}>
        苹果
      </span>
      <span id="b1" className={styles.b1}>
       雪梨
      </span>
      <span id="c1" className={styles.c1}>
        香蕉
      </span>
      <span id="d1" className={styles.d1}>
        橘子
      </span>
    </div>
  )
}

打印结果是空白内容，使用useEffect挂载上去后，也显示空白内容。
这边的代码有接近600行，本提问里的代码是抽取了部分代码并修改了内容后发出的。
代码里span要经过picker选中值、转化、逻辑判断后才会有文本内容，一进入页面时是没有选中值的，而useEffect是一进入页面就会显示span里的文本内容，之后无论picker里有没有选中值，都不会再更改，估计是由于这个原因才显示空白内容。
请问有没有一种方法，可以在一进入页面时不获取span里的内容，等到经过picker选中值、转化、逻辑判断后才显示span里的内容？如果有，恳请在现有代码基础上展示说明。
不使用useRef，不通过点击等事件，要实现获取到span里的文本内容的效果，请问应该如何修改以上代码？请在现有代码基础上展示说明

如果想要使用getElementById()获取元素，那么也得让元素挂载上去了才行，可以按如下方式试试

const News = () => {
useEffect(() => {
  let a1 = document.getElementById("a1")
  let b1 = document.getElementById("b1")
  let c1 = document.getElementById("c1")
  let d1 = document.getElementById("d1")
  console.log(a1.innerText)
}, [])
  return (
    <div>
      <span id="a1" className={styles.a1}>
        苹果
      </span>
      <span id="b1" className={styles.b1}>
       雪梨
      </span>
      <span id="c1" className={styles.c1}>
        香蕉
      </span>
      <span id="d1" className={styles.d1}>
        橘子
      </span>
    </div>
  )
}