Why kebab-case non-standard attributes are allowed while others aren't? And how to define types like this in TypeScript?

Using foo as an attribute throws an error:

// App.tsx
//                     👇 throws
const App = () => <div foo></div>

export default App

Type '{ foo: true; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'foo' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

But using foo-foo is fine, why's that?

// App.tsx
//                     👇 no error is thrown
const App = () => <div foo-foo></div>

export default App

And most importantly, how to define types like this in TypeScript? i.e. Only allowing standard or kebab-case attributes.

from Why kebab-case non-standard attributes are allowed while others aren't? And how to define types like this in TypeScript?