react，使用useRef获取多个span标签里的文本内容？

代码如下：

import React, { useState, useRef } from 'react'
const News = () => {
  const a1 = useRef()
  const b1 = useRef()
  const c1 = useRef()
  const d1 = useRef()
  console.log(a1)
  return (
    <div>
      <span ref={a1} className={styles.a1}>
        苹果
      </span>
      <span ref={a1} className={styles.b1}>
       雪梨
      </span>
      <span ref={a1} className={styles.c1}>
        香蕉
      </span>
      <span ref={a1} className={styles.d1}>
        橘子
      </span>
    </div>
  )
}

a1的打印结果如下：

点开current后的页面底部显示如下：

而且，看到current里有innerText的属性：

现需打印a1、b1、c1、d1里的文本内容，请问正确的代码时应该如何写？

你需要放在 useEffect 里

import React, { useState, useRef, useEffect } from 'react';
const News = () => {
    const a1 = useRef()
    const b1 = useRef()
    const c1 = useRef()
    const d1 = useRef()
    useEffect(() => {
        console.log(a1.current.innerText)
    }, [])

    return (
        <div>
            <span ref={a1}>
                苹果
            </span>
            <span ref={a1} >
                雪梨
            </span>
            <span ref={a1}>
                香蕉
            </span>
            <span ref={a1}>
                橘子
            </span>
        </div>
    )
}