React Scroll button dosent change - css

Question

I have never done alot of designing when it comes to scrolls in react but decided to try today. From my understand the way to do is to use a wrapper and the need for using a library is not needed. I dont understand why nothing happens to my scroll button?
import React, { useState } from 'react'
import ArrowCircleRightIcon from '#mui/icons-material/ArrowCircleRight';
const SendMessageUser = () => {
const styles = {
main: {
height: "100%",
position: "relative"
},
wrapper: {
height: "100%",
position: "relative",
"::-webkit-scrollbar": {
width: "20px"
},
"::-webkit-scrollbar-track": {
backgroundColor: "transparent"
},
"::-webkit-scrollbar-thumb": {
backgroundColor: "#d6dee1",
borderRadius: "20px",
border: "6px solid transparent",
backgroundClip: "content-box"
},
"::-webkit-scrollbar-thumb:hover": {
backgroundColor: "#a8bbbf"
}
},
textArea: {
height: "100%", overflowY: "auto", width: "100%", backgroundColor: "#fff", resize: "none", border: "none", outline: "none", padding: "10px 25px 10px 10px", fontSize: "15px",
}
};
const [message, setMessage] = useState("");
const handleChange = (event) => {
setMessage(event.target.value);
};
const sendMessage = (event) => {
event.preventDefault();
}
return (
<form className="send-message" onSubmit={(event) => sendMessage(event)} style={styles.main}>
<div style={styles.wrapper}>
<textarea spellcheck="false" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false" style={styles.textArea}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, ipsum in hendrerit laoreet, ligula ipsum commodo nisl, eu commodo est nulla quis dolor.</textarea>
</div>
<ArrowCircleRightIcon color="primary" sx={{
position: "absolute",
top: 0,
right: 0,
transform: "rotate(-90deg)",
}} />
</form >
)
}
export default SendMessageUser