Sum component that retruns sum, and toggles display or sum with radio buttons

Sum.tsx

import React, { useState, useMemo } from "react";

interface ISumProps {
  values: number[];
}

const Sum = ({ values }: ISumProps) => {
  const [showSum, setShowSum] = useState<boolean>(false);

  const sum = useMemo(
    () =>
      values.reduce((accumulator, value) => {
        return accumulator + value;
      }, 0),
    [values]
  );

  const handleShowSum = (bool: boolean) => {
    setShowSum(bool);
  };

  return (
    <>
      <label>Show Sum</label>
      <input
        type='radio'
        name='sum'
        value='Show'
        onChange={() => handleShowSum(true)}
      />
       <label>Hide Sum</label>
      <input
        type='radio'
        name='sum'
        value='Hide'
        onChange={() => handleShowSum(false)}
      />
      <span>{showSum && sum}</span>
    </>
  );
};

export default Sum;