Working on a type safe way of showing variable info

spec.tsx

import * as React from "react"

interface SpecsTypes {
  [key: string]: string | number | boolean;
}
function Specs(keyValuePairs: SpecsTypes) {
  return (
    Object.entries(keyValuePairs).map(([key, value]) => {
      
      if (key === 'length' && typeof value === 'number') {
        return (
          <div>
            <h2>{key}</h2>
            <h3>{value / 2}</h3>
          </div>
        );
      }

      if (typeof value === 'boolean') {
        return (
          <div key={key}>
            <h2>{key}</h2>
            <h3>Yes</h3>
          </div>
        );
      }

      return (
        <div key={key}>
          <h2>{key}</h2>
          <h3>{value}</h3>
        </div>
      )

    })
  );
}

const SpecTestPage = () => {

  return (
    <>
      test
      <Specs
        name="hello"
        length={12}
      />
    </>
  )
}

export default SpecTestPage