react native checkbox

I am using checkbox for my app. When I tried to use react-native's CheckBox, it showed me:

CheckBox has been removed from React Native. It can now be installed and imported from @react-native-community/checkbox instead of 'react-native'.

So, I am using @react-native-community/checkbox. I want to hide the onCheck Icon ✔️ and add custom svg icon. @react-native-community/checkbox has hideBox props. So, I hide the box. I used it's another props children when I added my SVG icon but the tick ✔️ is always there. I used onCheckColor props and make color white but UI does not looks. I don't know how to fix it.

Here is my code

import * as React from "react";
import FontAwesome from "react-native-vector-icons/FontAwesome";

import styled from "styled-components/native";
import CheckBox, { CheckBoxProps } from "@react-native-community/checkbox";

const StyledCheckmark =
  styled(CheckBox) <
  CheckBoxProps >
  `
  height: 24px;
  width: 24px;
`;

export default function CheckMark() {
  return (
    <StyledCheckmark
      disabled={false}
      hideBox={true}
      value={true}
      onFillColor={"grey"}
      onCheckColor={"white"}
      onTintColor={"grey"}
      animationDuration={0.1}
      onAnimationType={"fill"}
      style=
      children={<FontAwesome name="search" color={"grey"} size={24} />}
    />
  );
}