Requested : To help me ,how can I use Header section in my code

[hassnain9166]

import Modal from "react-bootstrap/Modal";
import React from "react";
import Stories, {
WithSeeMore,
WithVideo,
WithHeader,
} from "react-insta-stories";

export const renderer = ({ story, action, isPaused, config }) => {
if (story.file_type === "video") {
return (

<video
src={story.file}
autoPlay={action === "play"}
muted={!isPaused}
/>

);
} else if (story.file_type === "image") {
return (

);
} else {
return null;
}
};

export const tester = (story) => {
return {
condition: story.file_type === "video" || story.file_type === "image",
priority: 3,
};
};

const App = ({ file, show, handleClose, profile_image }) => {
const convertedStories = file?.map((story) => {
if (story.file_type === "image") {
return { url: story.file, type: "image" };
} else if (story.file_type === "video") {
return { url: story.file, type: "video" };
}
});
return (

<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
// width:"10vw"
}}
>
<Stories
stories={convertedStories}
renderers={[{ renderer, tester }]}
seeMore={}
height={"90vh"}
// width={"100vw"}
/>


);
};

export default App;

[hassnain9166]

I want to use header profile_image and created date in my code

[hassnain9166]

[hassnain9166]

import Modal from "react-bootstrap/Modal";
import React, { useState, useEffect } from "react";
import Stories, {
WithSeeMore,
WithVideo,
WithHeader,
} from "react-insta-stories";

const renderer = ({ story, action, isPaused, config }) => {
if (story.file_type === "video") {
return (

<video
src={story.file}
autoPlay={action === "play"}
muted={!isPaused}
/>

);
} else if (story.file_type === "image") {
return (

);
} else {
return null;
}
};

const tester = (story) => {
return {
condition: story.file_type === "video" || story.file_type === "image",
priority: 3,
};
};

const App = ({ file, show, handleClose, profile_image, user_name }) => {
const [allStoriesEnd, setAllStoriesEnd] = useState(false);

useEffect(() => {
if (show) {
setAllStoriesEnd(false);
}
}, [show]);

const handleAllStoriesEnd = () => {
setAllStoriesEnd(true);
};

const handleModalClose = () => {
handleClose();
setAllStoriesEnd(false);
};

const stories = file?.map((story) => {
if (story.file_type === "image") {
return {
url: story?.file,
duration: 5000,
type: "image",
header: {
heading: user_name,
subheading: story.created_at,
profileImage: profile_image,
},
};
} else if (story.file_type === "video") {
return {
url: story?.file,
duration: 5000,
type: "video",
header: {
heading: user_name,
subheading: story.created_at,
profileImage: profile_image,
},
};
}
}).filter(Boolean);

return (

<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
// width:"10vw"
}}
>
<Stories
stories={stories}
renderers={[{ renderer, tester }]}
seeMore={}
height={"90vh"}
onAllStoriesEnd={handleAllStoriesEnd}
/>

{allStoriesEnd && handleClose()}

);
};

export default App;
resolved::