I have a library that I am using in my nextjs application. In order to useState to store one of the value in react-grid-layout, I had to use Typescript, so I installed the package as seen below.

npm install --save @types/react-grid-layout

The code for the component looks like this

'use client'

import { Responsive, WidthProvider } from "react-grid-layout";
import { useState } from "react";
import { Layouts } from "react-grid-layout";

export function DragBoard() {

  const [ layouts, setLayouts ] = useState<Layouts>({
    lg : [
      { i: "1", x: 0, y: 0, w: 3, h: 1 }
    ]}
  );

  const ResponsiveGridLayout = WidthProvider(Responsive);

  return (
    <ResponsiveGridLayout
      className="layout bg-orange-100 m-10"
      layouts={layouts}
      breakpoints={{ lg: 1200}}
      cols={{ lg: 3}}
    >
      <div key="1" className="bg-pink-100">1</div>
    </ResponsiveGridLayout>
  );
}

And this error shows up on in the terminal.

I believe I may be importing the Layouts type wrongly? However I cannot get it to work regardless of what I do, could anyone offer some advice? Thank you!

Lastly, not sure if this helps but the Layout does not light up even after I use it in the useState type.