React, trying to return props from json

I am just trying to experiment with an app, and in my html I am trying to return the props of userData which in my console logs things such as lineStatus etc, however I seem to be returning nothing.

my code is as follows:

import React, { useState, useEffect } from 'react'
import axios from "axios";

const tflData = "https://api.tfl.gov.uk/line/mode/tube/status";

axios.request(tflData).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});

function Lines() {
    
    const [userData, setUserData] = useState({});
    const tflUserWithFetch = async () => {
        const response = await fetch(tflData);
        const jsonData = await response.json();
        setUserData(jsonData);
      };

  useEffect(() => {
    tflUserWithFetch();
  }, []);
  
  return (
    <div className="App">
      <header className="App-header">
        <h2>Line Data</h2>
      </header>
      <div className="user-container">
        <h5 className="info-item">Tube station: {userData.name}</h5>
        <h5 className="info-item">Status: {userData.lineStatuses}</h5>
     
      </div>
    </div>
  );
}

export default Lines

Basically I am trying to return the values or content values but I am missing something.