Structure is not well defined, how proper use it with schema-dts

Hello, im using `"react": "^16.6.0"`

The sample repo code is this one (which have a syntax error):
```jsx
import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";

export function GraceHopper() {
return
item={{
"@context": "https://schema.org",
"@type": "Person",
name: "Grace Hopper",
alternateName: "Grace Brewster Murray Hopper",
alumniOf: {
"@type": "CollegeOrUniversity",
name: ["Yale University", "Vassar College"]
},
knowsAbout: ["Compilers", "Computer Science"]
}}/>;
}
```

If i use code like this all works fine
```jsx
import { JsonLd } from "react-schemaorg";

export function personJsonLd() {
const sampleData = {
"@context": "https://schema.org",
"@type": "Person",
name: "Grace Hopper",
alternateName: "Grace Brewster Murray Hopper",
alumniOf: {
"@type": "CollegeOrUniversity",
name: ["Yale University", "Vassar College"]
},
knowsAbout: ["Compilers", "Computer Science"]
};

return ;
}
```

But as you can see in the previous code i haven't used the DTS, how can i use the schema-dts library, i didn't figure it out 😞
i have try the return like:
```jsx
return (



);
```

But got a bunch of console error, some light/improved example would be much appreciated 🙏🏽
Thanks in advance