What exactly does {} mean in TypeScript?

I saw the following viewpoint on the React TypeScript Cheatsheet website: “An empty interface, {} and Object all represent “any non-nullish value”—not “an empty object” as you might think.”

For example:

let value: {};

value = 1;
value = "foo";
value = () => alert("foo");
value = {};
value = { foo: "bar" };

value = undefined; // Error Type
value = null;  // Error Type

But it doesn’t seem to work that way in React.

As shown in the code below, if {} means non-empty values, it would imply that the Child component’s props could accept any non-empty parameters. However, when I tried to pass an id to the Child component, it resulted in an error.

const Child:FC<{}> = (props) => {
  return (
    <div>
      Child
    </div>
  )
}

const App = () => {
  return (
    {/**Error: Type '{ id: string; }' is not assignable to type 'IntrinsicAttributes'.**/}
    <Child id={'111'}/>
  );
}

I would like to receive a fundamental explanation.