Styled Paper - Copy this React, Mui Component to your project

import React, { useEffect, useState } from "react"; import { Grid2, Stack, Typography, List, Box, TextField, InputAdornment, IconButton, ListItemAvatar, Avatar } from "@mui/material"; import "../Chat.css"; import { useSelector } from "react-redux"; import ChatContainer from "./ChatContainer"; import { GET_CHAT_GROUP_DASHBOARD } from "../../constant/Apipath"; import { Getrequestcall } from "../../api/Getrequest"; import ChatListItem from "../coman/ChatListItem"; import { IoAddCircleOutline, IoSearchOutline } from "react-icons/io5"; function ChatLayout() { const [chatGroups, setChatGroups] = useState([]); const [selectedChat, setSeletectedChat] = useState({}); const { loginData } = useSelector((state) => state?.main); const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { getData(); }, [loginData]); const getData = async () => { try { setLoading(true); let res = await Getrequestcall( `${GET_CHAT_GROUP_DASHBOARD}/${loginData.userInformation?.UserId}`, loginData?.accessToken ); const chatGroups = res.data.data.filter((chat) => { if (chat.AppRecordId === 0) { return chat.messageText !== ""; } return true; }); setChatGroups(chatGroups); setLoading(false); } catch (err) { console.log("Error while getting the list of members:-", err); setLoading(false); } }; const onChatClick = (item) => { setSeletectedChat(item); }; const filteredChatGroups = chatGroups.filter((chat) => { const searchTerm = searchQuery.toLowerCase(); return ( chat.groupUserFirstName1?.toLowerCase().includes(searchTerm) || chat.groupUserLastName1?.toLowerCase().includes(searchTerm) || chat.groupUserFirstName2?.toLowerCase().includes(searchTerm) || chat.groupUserLastName2?.toLowerCase().includes(searchTerm) ); }); return ( <> <Grid2 container className="chat-container"> <Grid2 size={{ xs: 12, sm: 12, md: 3, lg: 3, xl: 3 }} className="chat-list"> <Box p={2}> <Stack direction="row" spacing={1} display="flex" justifyContent="space-between" mb={2}> <Box sx={{ display: "flex", alignItems: "center" }}> <ListItemAvatar> <Avatar src={loginData?.pictureUrl} sx={{ width: 45, height: 45 }} /> </ListItemAvatar> <Typography variant="h6" fontWeight="bold"> Messages </Typography> </Box> <IconButton color="primary" aria-label="create new chat"> <IoAddCircleOutline size={24} /> </IconButton> </Stack> <TextField fullWidth variant="outlined" placeholder="Search conversations" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} InputProps={{ startAdornment: ( <InputAdornment position="start"> <IoSearchOutline /> </InputAdornment> ) }} size="small" /> </Box> <Stack className="chat-list-scroll"> <List> {loading ? ( <Typography variant="h6" align="center" sx={{ color: "gray", mt: 2 }}> Loading... </Typography> ) : filteredChatGroups.length !== 0 ? ( filteredChatGroups .sort((a, b) => new Date(b.dateSent) - new Date(a.dateSent)) .map((item, index) => ( <ChatListItem key={index} chat={item} onClick={onChatClick} /> )) ) : ( <Typography variant="h6" align="center" sx={{ color: "gray", mt: 2 }}> No Data Available </Typography> )} </List> </Stack> </Grid2> <Grid2 size={{ xs: 12, sm: 12, md: 9, lg: 9, xl: 9 }} className="chat-screen"> {Object.keys(selectedChat).length === 0 ? ( <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" textAlign="center" sx={{ maxWidth: "400px", p: 3 }}> <Avatar sx={{ width: 120, height: 120, mb: 3, backgroundColor: "primary.light" }}> <IoSearchOutline size={60} /> </Avatar> <Typography variant="h4" color="primary" gutterBottom fontWeight="bold"> Welcome to Messages </Typography> <Typography variant="h6" color="text.secondary" gutterBottom> Connect and chat with your friends </Typography> <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}> Select a conversation from the sidebar or start a new chat to begin messaging </Typography> </Box> ) : ( <ChatContainer selectedChat={selectedChat} /> )} </Grid2> </Grid2> </> ); } export default ChatLayout; in this code implenet