Typescript/CSS : Checkbox colour isn't right and is not aligned in the center

I'm working on a project where I have to build a check box which has its label is aligned vertically center to the checkbox and the colour on selecting is black, neither of which is happening. Here is my code

import React from "react";

import './checkbox.less';

interface props {
  label: string;
}

const Checkbox:React.FC<props> = ({label }) => (
    <div className="flex">
      <div>
        <input
          type="checkbox"
          id={label}
          className = "container"
        />     
        <label htmlFor={label}>{label}</label> 
      </div>
    </div>
  )
export default Checkbox;

CSS File :

.App {
    font-family: sans-serif;
    text-align: center;
  }

  .container {
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    color: black;
    vertical-align:middle;
  }
  
  .flex{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    vertical-align:middle;
  }

I tried changing them by adding the properties, but it didn't quite work. Please help