Lottie animation not working in new remix version

[KwaminaWhyte]

I get this error when I tried using lottie in remix

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at renderElement (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6109:9) at renderNodeDestructiveImpl (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11) at renderNodeDestructive (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14) at renderNode (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12) at renderChildrenArray (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6277:7) at renderNodeDestructiveImpl (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6207:7) at renderNodeDestructive (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14) at renderNode (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12) at renderHostElement (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3) at renderElement (/Users/kwaminawhyte/Desktop/projects/side_hustle/aat/node_modules/react-dom/cjs/react-dom-server.node.development.js:6018:5)

My Code below. Please any help

file: mylottie.client.tsx

`import { ClientOnly } from "remix-utils/client-only";
import Lottie from "react-lottie";
import tour from "~/assets/lotties/tour-guide.json";

export default function Lottiess() {
return (
<ClientOnly fallback={

Loading lottie

}>
{() => (
<Lottie
options={{
loop: true,
autoplay: true,
animationData: tour,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
}}
height={"auto"}
width={"100%"}
/>
)}

);
}
`