Why doesnt the table get populated with the api response?

Ok. I have tried debugging this for hours. I call a fetch api and have verified that it returns the correct response formatted in the correct way, with all the keys and in array format compatible with the map function. However, the table when rendered appears to be missing the content of the body. Any ideas?

import React, { useEffect, useState, useContext } from 'react';
import "../App.css";
import { UserContext } from '../UserContext';

export function Watchlist() {
  const { user, logout } = useContext(UserContext);
  const [watchlist, setWatchlist] = useState([]);
  useEffect(() => {
    fetch(`http://127.0.0.1:8000/watchlist?user_id=${encodeURIComponent(user.id)}`)
      .then(response => response.json())
      .then(json => {
        setWatchlist(json)
      }
      ).catch(error => console.error(error));
  }, [user]);
  return(
    <table>
        <thead>
            <tr>
            <th>Ticker</th>
            <th>Name</th>
            <th>Last Price</th>
            </tr>
        </thead>
        <tbody>
            {watchlist && watchlist.map((s) => {
            <tr>
                <td>{s.ticker}</td>
                <td>{s.name}</td>
                <td>{s.last_price}</td>
            </tr>})}
        </tbody>
    </table>
  );
};