SPFX > pnp.sp reference in React project

I have a working SPFX project using pnp.sp.search (without an additional javascript framework).

I import pnp.sp like this in my webparts.ts file :

import * as pnp from 'sp-pnp-js';
import { SearchQuery, SearchResults } from "sp-pnp-js";

All my coding is done within this file.

Now I want to do some testing using React.

So I create a new project using the react framework.

I reference the same way (in my webparts.ts file) but do the coding in the components/blabla.tsx file.

This is not working. I get an error "cannot find pnp".

When I import pnp.sp in the components/blabla.tsx file I get even more errors telling me, for example, "Argument of type ''Element" is not assignable to parameter f type 'string'.

So how do I Import pnp.sp in a React project?