React中函数返回的链接无法渲染的问题求助

我想要把从DynamoDB表获取的标题数组映射成React链接并展示出来。我已经成功把标题转换成了链接数组，控制台也能打印出返回结果，但就是看不到页面上渲染出这些链接。哪怕我把DisplayTitles函数的返回换成包裹在p标签里的“Hello World”，页面上还是什么都没有。我甚至尝试用列表包裹它们，也没成功。

我到底漏掉了什么？这看起来应该很简单，但我就是卡在这里了。我也查了其他类似的返回问题，但没找到适合我的解决方案。感谢你的帮助。

我的index.js文件： #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我的App.js文件： #

import { React } from 'react';
import './App.css';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import {Home} from './components/Home';
import {About} from './components/About';
import {DisplayTitles} from './components/AwsFunctions';

function App() {
  return (
    <BrowserRouter>
      <h1>Hello World</h1>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/about'>About</Link></li>
        <DisplayTitles tableName="recipes"/>
      </ul>
      <Routes>
        <Route path='/' exact element={<Home/>} />
        <Route path='/about' element={<About/>} />
      </Routes>
    </BrowserRouter>
  )
}

export default App;

有问题的AwsFunctions.js文件： #

import * as AWS from 'aws-sdk';
import { Link } from 'react-router-dom';

AWS.config.update({
  region: 'some where',
  endpoint: 'out there',
  accessKeyId: 'key',
  secretAccessKey: 'secret'
});

const docClient = new AWS.DynamoDB.DocumentClient()

export function DisplayTitles(props) {
  var params = {
    ProjectionExpression: "title",
    TableName: props.tableName
  }

  docClient.scan(params, function (err, data) {
    if (data) {
      const links = data['Items']
      const listLinks = links.map(link => (<li><Link to="/">{link.title}</Link></li>));
      return listLinks
    } else {
      console.log(err)
    }
  })
};

备注：内容来源于stack exchange，提问作者Art Vandalay