reactjs - cómo estilizar el número que gira en react

Quiero crear un contador de visitantes para mi sitio web. Uso una API para obtener el contador de visitas y utilizo React flip number. Quiero crear algo así.

Pero después de usar el contador de números giratorio de React se volvió así

quiero preguntar cómo estilizar el contador con react flip number y dar espacio entre los números como en el ejemplo

aquí mi código

 type visitortype={
      count: number;
    }


const Footer = () => {
  const [visitor, setvisitor] = useState<visitortype>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  setvisitor(allvisitor))
    .catch(error => console.log(error));
  }, []);

 return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
        <Box w={{ base: "100px", lg: "220px" }} paddingBottom={"10px"}>
          <Image src={imgLogoMd} alt="Logo" w="100%" />
          <HStack>

             <FlipNumbers 
          height={25} 
           width={20}  
           color="white" 
           background="#8D0000"
           numberStyle={{
            fontSize: 16,
          }}
           play perspective={100} 
           numbers={`${visitor?.count ?? 0}`}/>;

          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );

};