TS/React error regarding a prop and tag’s children [duplicate]

I’m trying to pass a prop to a React component and display it as text:

import * as React from "react";
import { render } from "react-dom";

interface Prop {
  input: string;
}

const test = "test";

function App({input}: Prop) {
  return (
    <div
      className="App"
      style={{
        background: "#ddd",
        display: "flex"
      }}
    >
      <h1
        style={{
          fontWeight: 400,
          fontSize: "30px"
        }}
      >
        Hello CodeSandbox {{ input }}
      </h1>
      <h2
        style={{
          fontWeight: 400,
          fontSize: "20px"
        }}
      >
        Start editing to see some magic happen!
      </h2>
    </div>
  );
}

render(<App input={test} />, document.getElementById("root"));

In my local machine, VS Code, I get this React/TypeScript error:

This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.

In Codesandbox, I get this error:

Objects are not valid as a React child (found: object with keys {input}). If you meant to render a collection of children, use an array instead.
    in h1 (created by App)
    in div (created by App)
    in App

I’m not sure if it’s the same problem.

Why is this, and how to fix it?

Live code: https://codesandbox.io/s/test-tsx-forked-y4e0eh?file=/src/index.tsx