Why am I getting a "Objects are not valid as a React child" error? I'm not passing an object

I'm learning, and having an issue with this error. My intention is for payrate to act as the parent, with to child components. Timer sets a timer when the button is clicked, and ./today displays the gross pay. The gross pay is calculated in the parent ./payrate component, using timer and user input as props.The reason I'm using today as a child component, is because I may add functionality to it in the future.

I am using React JS and Vite. No backend, I intend to add localStorage to this later on.

I am trying to calculate the gross pay in the parent component, and use it as props to display in the child component. But i can't get rid of this "Objects are not valid as a React child" error. Can any of you see why I am getting this error, and how I can fix this?

import React, { useState } from 'react';
import Timer from './timer';
import TodaysPay from './today';

const PayRate = (props) => { 
   // handles the form         
  const [inputRate, setInputRate] = useState('');

  const handleRate = (event) => {
      setInputRate(event.target.value);
    }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`hourly rate is ${inputRate}`);
  }
// this calculates the hourly pay into seconds
    const {seconds} = props;
    const grossPay = (inputRate / 3600) * seconds; 
  
// end pay calculation
  
  return (
    <div>
      <h1>
        {inputRate}
      </h1>
      <TodaysPay grossPay={grossPay} />
      <Timer />
      <form onSubmit={handleSubmit}>
        <input placeholder="Hourly Rate" type="number" value={inputRate} onChange={handleRate} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
  export default PayRate;

import React from 'react'
import PayRate from './payrate';

// displays the grosspay, calculated in ./payrate.jsx
export default function TodaysPay(props) {
  const grossPay = props;
  return (
    <div>
      {grossPay}
    </div>
  )
}

I have been using chatGPT and it got me to where my code snippets are now, but I still have the error. I have also been using google, but I can't find answer that seem relevant to my code. I did have more props in the TodaysPay attrubutes, but realized I didn't need them, so i removed them, but it didn't help.

props is an object in function components (TodaysPay)

this line: const grossPay = props;

should be: const { grossPay } = props; or const grossPay = props.grossPay;

or

export default function TodaysPay({ grossPay }) {
    return (
      <div>
        {grossPay}
      </div>
    )
}