Trying to use a table in a React component but running into div issues

I'm new to React so going through a tutorial. I am currently trying to complete a basic exercise that has asked me to use an HTML table to display stats about button presses.

Currently, my statistics component isn't rendering anything to the index page but also, when trying to add I get issues with being a child of div. I have tried many combinations but still haven't figured it out.

Any suggestions would be appreciated.

import { useState } from 'react'

const Feedback = ( {goodClick, neutralClick, badClick}) => {
    return(
        <div>
            <h1>Feedback</h1>
            <Button handler={goodClick} text={"good"}></Button>
            <Button handler={neutralClick} text={"neutral"}></Button>
            <Button handler={badClick} text={"bad"}></Button>
        </div>
    )
}

const Button = ({ handler, text }) => {
    return (
        <button onClick={() => handler(1)}>{text}</button>
    )
}
const Statistics = ({ goodValue, neutralValue, badValue, total, averageValue }) => {
    if (total.length === 0){
        return(<div>Please give feedback using buttons above</div>)
    }
    return (
        <div>
            <StatisticLine statType={goodValue} text={"good"}></StatisticLine>
            <StatisticLine statType={neutralValue} text={"neutral"}></StatisticLine>
            <StatisticLine statType={badValue} text={"bad"}></StatisticLine>
            <StatisticLine statType={total} text={"total"}></StatisticLine>
            <StatisticLine statType={averageValue} text={"average"}></StatisticLine>
        </div>
    )
}

const StatisticLine = ({ type, value }) => {
    return (
        <tbody>
            <tr>
                <td>{value}</td>
                <td>{type}</td>
            </tr>
        </tbody>
    )
}

const App = () => {
    // save clicks of each button to its own state
    const [good, setGood] = useState(0)
    const [neutral, setNeutral] = useState(0)
    const [bad, setBad] = useState(0)

    const incGood = (newValue) => setGood(good+newValue)
    const incNeutral = (newValue) => setNeutral(neutral+newValue)
    const incBad = (newValue) => setBad(bad+newValue)

    return (
        <div>
            <Feedback
                goodClick={incGood}
                neutralClick={incNeutral}
                badClick={incBad}>
            </Feedback>

            <Statistics
                goodValue = {good}
                neutralValue = {neutral}
                badValue={bad}
                total = {good + neutral + bad}
                averageValue ={good + neutral + bad/3}
            >
            </Statistics>
        </div>
    )
}

export default App

The problem is occurring in the StatisticLine component.

const StatisticLine = ({ type, value }) => {
    return (
        <tbody>
            <tr>
                <td>{value}</td>
                <td>{type}</td>
            </tr>
        </tbody>
    )
}

You are trying to destructure type, and value from the component props, but the props being passed in don't match those property names.

For example: <StatisticLine statType={goodValue} text={"good"}></StatisticLine>

Here you are passing two properties, statType, and text. These property names needs to match exactly when destructuring them in the StatisticLine component.

To fix the rendering issue, replace the StatisticLine component with this:

const StatisticLine = ({ statType, text }) => {
  return (
    <tbody>
      <tr>
        <td>{statType}</td>
        <td>{text}</td>
      </tr>
    </tbody>
  );
};