how to customize React-Bootstrap style with css object in typescript

I'm using React-Bootstrap in Typescript for my project. I trying to customize the style with css object file passing to the style attribute but it can't support many things. My code are like follows:

import "./SideBar2.css";
import { Link } from "react-router-dom";
import {
  PersonCircle,
  HouseDoor,
  Wallet2,
  CashStack,
  Gear,
  BoxArrowRight,
  Mailbox2,
} from "react-bootstrap-icons";

interface Props {
  width: string;
  goto: (url: string) => void;
}


const myStyle = 
  {
    marginTop: "0.8em",
    padding: "0 0.8em",
    overflowY: "scroll",
    overflowX: "hidden",

    "&::-webkit-scrollbar": {
      width: "10px",
      height: " 100%",
      borderRadius: "30px",
    },

    "&::-webkit-scrollbar-track ": {
      height: " 100%",
      borderRadius: "30px",
      background: "transparent"
    },

    "&::-webkit-scrollbar-thumb ": {
      borderRadius: "30px",
      background: "linear-gradient(rgb(39, 181, 216), rgb(25, 40, 68))",
    },
};

const SideBar2 = (props: Props) => {
  return (
    <div className="sidebar__ctrl" style={{ width: `${props.width}` }}>
      {/* <div className="sidebar__item"> */}
        <div style={myStyle}>
        <ul className="main-menu-ul">
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/account")}
            >
              <Wallet2 size={25} />
              <small>Account</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/payment")}
            >
              <CashStack size={25} />
              <small>Payments</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/fund-transfer")}
            >
              <Mailbox2 size={25} />
              <small>Transfer</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/service-config")}
            >
              <Gear size={25} />
              <small>Services</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action">
              <BoxArrowRight size={25} />
              <small>Logout</small>
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default SideBar2;

here I'm trying to pass myStyleobject to the style attribute which is highlighted above, it throws an error like this: [Error message][1] [1]: https://i.stack.imgur.com/IYOLS.png

its show even simple thing like marginTop is not accepting. Here I want to add all my defined style as an object to the style attribute.

I'm stuck here anybody can help me?